<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Alert | Element Plus</title>
    <meta name="description" content="A Vue 3 based component library for designers and developers">
    <meta name="generator" content="VitePress v1.2.3">
    <link rel="preload stylesheet" href="/assets/style.B_e9f5k0.css" as="style">
    
    <script type="module" src="/assets/app.GpHgi9kG.js"></script>
    <link rel="modulepreload" href="/assets/chunks/framework.DcRevfCx.js">
    <link rel="modulepreload" href="/assets/chunks/theme.8dELuM1T.js">
    <link rel="modulepreload" href="/assets/chunks/contributors.DlPZCFvS.js">
    <link rel="modulepreload" href="/assets/chunks/theme.ByGSDE9h.js">
    <link rel="modulepreload" href="/assets/en-US_component_alert.md.CaJ6--CJ.lean.js">
    <link rel="icon" href="/images/element-plus-logo-small.svg" type="image/svg+xm">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="theme-color" content="#ffffff">
    <meta name="msapplication-TileColor" content="#409eff">
    <meta name="msapplication-config" content="/browserconfig.xml">
    <meta property="og:image" content="/images/element-plus-og-image.png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:description" content="A Vue 3 based component library for designers and developers">
    <script>window.supportedLangs=["en-US","es-ES","zh-CN"];</script>
    <script>(()=>{const o=window.supportedLangs,a="preferred_lang",r="en-US",s={en:"en-US",fr:"fr-FR",es:"es-ES"};let e=localStorage.getItem(a)||navigator.language;const n=s[e]||(o.includes(e)?e:r);if(localStorage.setItem(a,n),e=n,!location.pathname.startsWith(`/${e}`)){const t=[`/${e}`].concat(location.pathname.split("/").slice(2)).join("/");location.pathname=t.endsWith(".html")||t.endsWith("/")?t:t.concat("/")}navigator&&navigator.serviceWorker.controller&&navigator.serviceWorker.controller.postMessage({type:"LANG",lang:e})})();</script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-175337989-1"></script>
    <script>"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(o){console.log(o)}).catch(function(o){console.log(o)});</script>
    <script async>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","UA-175337989-1");</script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-M74ZHEQ1M1"></script>
    <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-M74ZHEQ1M1");</script>
    <script async>var resource=document.createElement("link");resource.setAttribute("rel","stylesheet"),resource.setAttribute("href","https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800|Open+Sans:400,600;display=swap"),resource.setAttribute("type","text/css");var head=document.querySelector("head");head.appendChild(resource);</script>
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body><div id="el-popper-container-1024"><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--><!--[--><!--v-if--><!--]--><!--teleport anchor--></div>
    <div id="app"><div class="App"><!--[--><span tabindex="-1" data-v-63b82da6></span><a href="#page-content" class="skip-link visually-hidden" data-v-63b82da6>Skip to content</a><!--]--><!----><header class="navbar has-sidebar"><div class="navbar-wrapper" data-v-5278b8c5><div class="header-container" data-v-5278b8c5><div class="logo-container" data-v-5278b8c5><a href="/en-US/" data-v-5278b8c5><img class="logo" src="/images/element-plus-logo.svg" alt="Element Plus Logo" data-v-5278b8c5></a></div><div class="content" data-v-5278b8c5><div id="docsearch" class="algolia-search-box search" data-v-5278b8c5></div><nav class="navbar-menu menu" data-v-5278b8c5><!--[--><a class="link-item link is-menu-link" href="/en-US/guide/design" data-v-afd7792a data-v-d0bc45d6><!--[--><!--[-->Guide<!--]--><!--]--><!----></a><a class="link-item link is-menu-link active" href="/en-US/component/overview" data-v-afd7792a data-v-d0bc45d6><!--[--><!--[-->Component<!--]--><!--]--><!----></a><a class="link-item link is-menu-link" href="/en-US/resource/index" data-v-afd7792a data-v-d0bc45d6><!--[--><!--[-->Resource<!--]--><!--]--><!----></a><!--]--></nav><div class="theme-toggler-content theme-toggler" data-v-5278b8c5 data-v-02ddc817><!----></div><div class="translation-container translation" data-v-5278b8c5 data-v-f414ea64><!----></div><div class="social-links" data-v-5278b8c5 data-v-0fbe8527><!--[--><a href="https://github.com/element-plus/element-plus" title="GitHub" target="_blank" rel="noreferrer noopener" class="social-link" data-v-0fbe8527 data-v-87052479><i class="el-icon" style="font-size:24px;" data-v-87052479><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-87052479><path fill="currentColor" d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"></path></svg><!--]--></i></a><!--]--></div><button class="reset-btn menu-hamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="full-screen" data-v-5278b8c5><span class="hamburger-1"></span><span class="hamburger-2"></span><span class="hamburger-3"></span></button></div></div></div><!----></header><div class="sub-nav py-3 flex items-center"><button class="reset-btn sidebar-button flex items-center" aria-expanded="false"><i class="el-icon mr-2" style="font-size:20px;"><!--[--><svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="7" width="11" height="2" fill="#606266"></rect><rect x="2" y="11" width="14" height="2" fill="#606266"></rect><rect x="2" y="15" width="8" height="2" fill="#606266"></rect><rect x="2" y="3" width="16" height="2" fill="#606266"></rect></svg><!--]--></i><span class="leading-6">Menu</span></button><button ariadisabled="false" type="button" class="el-button is-link go-back-top height-5" style=""><!--v-if--><span class=""><!--[--> Back to top <!--]--></span></button></div><div class="el-scrollbar sidebar"><div class="el-scrollbar__wrap el-scrollbar__wrap--hidden-default" style=""><div class="el-scrollbar__view" style=""><!--[--><aside><!--[--><div class="page-sidebar-row" data-v-02779303><p class="title" data-v-02779303>Sponsored by</p><div data-v-02779303 data-v-faed0b94><!--[--><a href="https://melecode.com/" title="美乐 - 企业级全栈低代码开发平台" class="sponsor-item inline-flex" style="" target="_blank" data-v-faed0b94><img src="/images/sponsors/mele-banner.png" alt="美乐" data-v-faed0b94></a><a href="https://vform666.com/" title="VForm - Vue 2/3 可视化低代码表单" class="sponsor-item inline-flex" style="" target="_blank" data-v-faed0b94><img src="/images/sponsors/vform-banner.png" alt="VForm" data-v-faed0b94></a><a href="https://www.jnpfsoft.com/index.html?from=elementUI" title="JNPF - JNPF 低代码开发平台，让开发变得简单！" class="sponsor-item inline-flex" style="" target="_blank" data-v-faed0b94><img src="/images/sponsors/jnpfsoft.jpg" alt="JNPF" data-v-faed0b94></a><!--]--></div><div data-v-02779303 data-v-0a7a34f6><!--[--><!--]--></div></div><!--]--><div class="sidebar-groups"><!--[--><section class="sidebar-group"><p class="sidebar-group__title">Overview</p><!--[--><a class="link" href="/en-US/component/overview" data-v-54799624><p class="link-text" data-v-54799624>Overview</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Basic</p><!--[--><a class="link" href="/en-US/component/button" data-v-54799624><p class="link-text" data-v-54799624>Button</p><!----></a><a class="link" href="/en-US/component/border" data-v-54799624><p class="link-text" data-v-54799624>Border</p><!----></a><a class="link" href="/en-US/component/color" data-v-54799624><p class="link-text" data-v-54799624>Color</p><!----></a><a class="link" href="/en-US/component/container" data-v-54799624><p class="link-text" data-v-54799624>Layout Container</p><!----></a><a class="link" href="/en-US/component/icon" data-v-54799624><p class="link-text" data-v-54799624>Icon</p><!----></a><a class="link" href="/en-US/component/layout" data-v-54799624><p class="link-text" data-v-54799624>Layout</p><!----></a><a class="link" href="/en-US/component/link" data-v-54799624><p class="link-text" data-v-54799624>Link</p><!----></a><a class="link flex items-center" href="/en-US/component/text" data-v-54799624><p class="link-text" data-v-54799624>Text</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-54799624><span class="el-tag__content"><!--[-->2.3.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/scrollbar" data-v-54799624><p class="link-text" data-v-54799624>Scrollbar</p><!----></a><a class="link" href="/en-US/component/space" data-v-54799624><p class="link-text" data-v-54799624>Space</p><!----></a><a class="link" href="/en-US/component/typography" data-v-54799624><p class="link-text" data-v-54799624>Typography</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Configuration</p><!--[--><a class="link" href="/en-US/component/config-provider" data-v-54799624><p class="link-text" data-v-54799624>Config Provider</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Form</p><!--[--><a class="link" href="/en-US/component/autocomplete" data-v-54799624><p class="link-text" data-v-54799624>Autocomplete</p><!----></a><a class="link" href="/en-US/component/cascader" data-v-54799624><p class="link-text" data-v-54799624>Cascader</p><!----></a><a class="link" href="/en-US/component/checkbox" data-v-54799624><p class="link-text" data-v-54799624>Checkbox</p><!----></a><a class="link" href="/en-US/component/color-picker" data-v-54799624><p class="link-text" data-v-54799624>Color Picker</p><!----></a><a class="link" href="/en-US/component/date-picker" data-v-54799624><p class="link-text" data-v-54799624>Date Picker</p><!----></a><a class="link" href="/en-US/component/datetime-picker" data-v-54799624><p class="link-text" data-v-54799624>DateTime Picker</p><!----></a><a class="link" href="/en-US/component/form" data-v-54799624><p class="link-text" data-v-54799624>Form</p><!----></a><a class="link" href="/en-US/component/input" data-v-54799624><p class="link-text" data-v-54799624>Input</p><!----></a><a class="link" href="/en-US/component/input-number" data-v-54799624><p class="link-text" data-v-54799624>Input Number</p><!----></a><a class="link flex items-center" href="/en-US/component/mention" data-v-54799624><p class="link-text" data-v-54799624>Mention</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-54799624><span class="el-tag__content"><!--[-->2.8.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/radio" data-v-54799624><p class="link-text" data-v-54799624>Radio</p><!----></a><a class="link" href="/en-US/component/rate" data-v-54799624><p class="link-text" data-v-54799624>Rate</p><!----></a><a class="link" href="/en-US/component/select" data-v-54799624><p class="link-text" data-v-54799624>Select</p><!----></a><a class="link" href="/en-US/component/select-v2" data-v-54799624><p class="link-text" data-v-54799624>Virtualized Select</p><!----></a><a class="link" href="/en-US/component/slider" data-v-54799624><p class="link-text" data-v-54799624>Slider</p><!----></a><a class="link" href="/en-US/component/switch" data-v-54799624><p class="link-text" data-v-54799624>Switch</p><!----></a><a class="link" href="/en-US/component/time-picker" data-v-54799624><p class="link-text" data-v-54799624>Time Picker</p><!----></a><a class="link" href="/en-US/component/time-select" data-v-54799624><p class="link-text" data-v-54799624>Time Select</p><!----></a><a class="link" href="/en-US/component/transfer" data-v-54799624><p class="link-text" data-v-54799624>Transfer</p><!----></a><a class="link flex items-center" href="/en-US/component/tree-select" data-v-54799624><p class="link-text" data-v-54799624>TreeSelect</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-54799624><span class="el-tag__content"><!--[-->2.1.8<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/upload" data-v-54799624><p class="link-text" data-v-54799624>Upload</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Data</p><!--[--><a class="link" href="/en-US/component/avatar" data-v-54799624><p class="link-text" data-v-54799624>Avatar</p><!----></a><a class="link" href="/en-US/component/badge" data-v-54799624><p class="link-text" data-v-54799624>Badge</p><!----></a><a class="link" href="/en-US/component/calendar" data-v-54799624><p class="link-text" data-v-54799624>Calendar</p><!----></a><a class="link" href="/en-US/component/card" data-v-54799624><p class="link-text" data-v-54799624>Card</p><!----></a><a class="link" href="/en-US/component/carousel" data-v-54799624><p class="link-text" data-v-54799624>Carousel</p><!----></a><a class="link" href="/en-US/component/collapse" data-v-54799624><p class="link-text" data-v-54799624>Collapse</p><!----></a><a class="link" href="/en-US/component/descriptions" data-v-54799624><p class="link-text" data-v-54799624>Descriptions</p><!----></a><a class="link" href="/en-US/component/empty" data-v-54799624><p class="link-text" data-v-54799624>Empty</p><!----></a><a class="link" href="/en-US/component/image" data-v-54799624><p class="link-text" data-v-54799624>Image</p><!----></a><a class="link" href="/en-US/component/infinite-scroll" data-v-54799624><p class="link-text" data-v-54799624>Infinite Scroll</p><!----></a><a class="link" href="/en-US/component/pagination" data-v-54799624><p class="link-text" data-v-54799624>Pagination</p><!----></a><a class="link" href="/en-US/component/progress" data-v-54799624><p class="link-text" data-v-54799624>Progress</p><!----></a><a class="link" href="/en-US/component/result" data-v-54799624><p class="link-text" data-v-54799624>Result</p><!----></a><a class="link" href="/en-US/component/skeleton" data-v-54799624><p class="link-text" data-v-54799624>Skeleton</p><!----></a><a class="link" href="/en-US/component/table" data-v-54799624><p class="link-text" data-v-54799624>Table</p><!----></a><a class="link flex items-center" href="/en-US/component/table-v2" data-v-54799624><p class="link-text" data-v-54799624>Virtualized Table</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-54799624><span class="el-tag__content"><!--[-->2.2.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/tag" data-v-54799624><p class="link-text" data-v-54799624>Tag</p><!----></a><a class="link" href="/en-US/component/timeline" data-v-54799624><p class="link-text" data-v-54799624>Timeline</p><!----></a><a class="link flex items-center" href="/en-US/component/tour" data-v-54799624><p class="link-text" data-v-54799624>Tour</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-54799624><span class="el-tag__content"><!--[-->2.5.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/tree" data-v-54799624><p class="link-text" data-v-54799624>Tree</p><!----></a><a class="link" href="/en-US/component/tree-v2" data-v-54799624><p class="link-text" data-v-54799624>Virtualized Tree</p><!----></a><a class="link flex items-center" href="/en-US/component/statistic" data-v-54799624><p class="link-text" data-v-54799624>Statistic</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-54799624><span class="el-tag__content"><!--[-->2.2.30<!--]--></span><!--v-if--></span></a><a class="link flex items-center" href="/en-US/component/segmented" data-v-54799624><p class="link-text" data-v-54799624>Segmented</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-54799624><span class="el-tag__content"><!--[-->2.7.0<!--]--></span><!--v-if--></span></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Navigation</p><!--[--><a class="link" href="/en-US/component/affix" data-v-54799624><p class="link-text" data-v-54799624>Affix</p><!----></a><a class="link flex items-center" href="/en-US/component/anchor" data-v-54799624><p class="link-text" data-v-54799624>Anchor</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-54799624><span class="el-tag__content"><!--[-->2.6.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/backtop" data-v-54799624><p class="link-text" data-v-54799624>Backtop</p><!----></a><a class="link" href="/en-US/component/breadcrumb" data-v-54799624><p class="link-text" data-v-54799624>Breadcrumb</p><!----></a><a class="link" href="/en-US/component/dropdown" data-v-54799624><p class="link-text" data-v-54799624>Dropdown</p><!----></a><a class="link" href="/en-US/component/menu" data-v-54799624><p class="link-text" data-v-54799624>Menu</p><!----></a><a class="link" href="/en-US/component/page-header" data-v-54799624><p class="link-text" data-v-54799624>Page Header</p><!----></a><a class="link" href="/en-US/component/steps" data-v-54799624><p class="link-text" data-v-54799624>Steps</p><!----></a><a class="link" href="/en-US/component/tabs" data-v-54799624><p class="link-text" data-v-54799624>Tabs</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Feedback</p><!--[--><a class="link active" href="/en-US/component/alert" data-v-54799624><p class="link-text" data-v-54799624>Alert</p><!----></a><a class="link" href="/en-US/component/dialog" data-v-54799624><p class="link-text" data-v-54799624>Dialog</p><!----></a><a class="link" href="/en-US/component/drawer" data-v-54799624><p class="link-text" data-v-54799624>Drawer</p><!----></a><a class="link" href="/en-US/component/loading" data-v-54799624><p class="link-text" data-v-54799624>Loading</p><!----></a><a class="link" href="/en-US/component/message" data-v-54799624><p class="link-text" data-v-54799624>Message</p><!----></a><a class="link" href="/en-US/component/message-box" data-v-54799624><p class="link-text" data-v-54799624>Message Box</p><!----></a><a class="link" href="/en-US/component/notification" data-v-54799624><p class="link-text" data-v-54799624>Notification</p><!----></a><a class="link" href="/en-US/component/popconfirm" data-v-54799624><p class="link-text" data-v-54799624>Popconfirm</p><!----></a><a class="link" href="/en-US/component/popover" data-v-54799624><p class="link-text" data-v-54799624>Popover</p><!----></a><a class="link" href="/en-US/component/tooltip" data-v-54799624><p class="link-text" data-v-54799624>Tooltip</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Others</p><!--[--><a class="link" href="/en-US/component/divider" data-v-54799624><p class="link-text" data-v-54799624>Divider</p><!----></a><a class="link flex items-center" href="/en-US/component/watermark" data-v-54799624><p class="link-text" data-v-54799624>Watermark</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-54799624><span class="el-tag__content"><!--[-->2.4.0<!--]--></span><!--v-if--></span></a><!--]--></section><!--]--></div><!--[--><!--]--></aside><!--]--></div></div><!--[--><div class="el-scrollbar__bar is-horizontal" style="display:none;"><div class="el-scrollbar__thumb" style="width:;transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical" style="display:none;"><div class="el-scrollbar__thumb" style="height:;transform:translateY(0%);"></div></div><!--]--></div><main id="page-content" class="page-content has-sidebar"><div class="doc-content-wrapper"><div class="doc-content-container"><div style="position:relative;" class="doc-content"><div><h1 id="alert" tabindex="-1">Alert <a class="header-anchor vp-link" href="#alert" aria-label="Permalink to &quot;Alert&quot;">​</a></h1><p>Displays important alert messages.</p><h2 id="basic-usage" tabindex="-1">Basic Usage <a class="header-anchor vp-link" href="#basic-usage" aria-label="Permalink to &quot;Basic Usage&quot;">​</a></h2><p>Alert components are non-overlay elements in the page that does not disappear automatically.</p><!--[--><div text="sm" m="y-4" data-v-72294632><p>Alert provides 4 types of themes defined by <code>type</code>, whose default value is <code>info</code>.</p>
</div><div class="example" data-v-72294632><div class="example-showcase" data-v-72294632><!--[--><div style="max-width:600px;" data-v-5f801023><div class="el-alert el-alert--success is-light" role="alert" data-v-5f801023><!--v-if--><div class="el-alert__content"><span class="el-alert__title"><!--[-->Success alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--info is-light" role="alert" data-v-5f801023><!--v-if--><div class="el-alert__content"><span class="el-alert__title"><!--[-->Info alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--warning is-light" role="alert" data-v-5f801023><!--v-if--><div class="el-alert__content"><span class="el-alert__title"><!--[-->Warning alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--error is-light" role="alert" data-v-5f801023><!--v-if--><div class="el-alert__content"><span class="el-alert__title"><!--[-->Error alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div></div><!--]--></div><div class="el-divider el-divider--horizontal m-0" style="--el-border-style:solid;" role="separator" data-v-72294632><!--v-if--></div><div class="op-btns" data-v-72294632><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Edit in Playground" tabindex="0" role="link" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M16 2v2h-1v3.243c0 1.158.251 2.301.736 3.352l4.282 9.276A1.5 1.5 0 0 1 18.656 22H5.344a1.5 1.5 0 0 1-1.362-2.129l4.282-9.276A7.994 7.994 0 0 0 9 7.243V4H8V2h8zm-2.612 8.001h-2.776c-.104.363-.23.721-.374 1.071l-.158.361L6.125 20h11.749l-3.954-8.567a9.978 9.978 0 0 1-.532-1.432zM11 7.243c0 .253-.01.506-.029.758h2.058a8.777 8.777 0 0 1-.021-.364L13 7.243V4h-2v3.243z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn github el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;color:var(--text-color-light);" data-v-72294632><!--[--><a href="https://github.com/element-plus/element-plus/edit/dev/docs/examples/alert/basic.vue" aria-label="Edit on GitHub" rel="noreferrer noopener" target="_blank" data-v-72294632><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z"></path></svg></a><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Copy code" tabindex="0" role="button" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><button aria-label="View source" class="reset-btn el-icon op-btn el-tooltip__trigger el-tooltip__trigger" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"></path></svg><!--]--></i></button><!--teleport start--><!--teleport end--><!--]--></div><div style="display:none;" class="example-source-wrapper" data-v-72294632 data-v-92bf09f8><div class="example-source" data-v-92bf09f8><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">600</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Success alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"success"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Info alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"info"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Warning alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"warning"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Error alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"error"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> scoped</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">.el-alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">.el-alert:first-child</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span></code></pre>
</div></div></div><div style="display:none;" class="example-float-control" tabindex="0" role="button" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-72294632><path fill="currentColor" d="M512 320 192 704h639.936z"></path></svg><!--]--></i><span data-v-72294632>Hide source</span></div></div><!--]--><h2 id="theme" tabindex="-1">Theme <a class="header-anchor vp-link" href="#theme" aria-label="Permalink to &quot;Theme&quot;">​</a></h2><p>Alert provide two different themes, <code>light</code> and <code>dark</code>.</p><!--[--><div text="sm" m="y-4" data-v-72294632><p>Set <code>effect</code> to change theme, default is <code>light</code>.</p>
</div><div class="example" data-v-72294632><div class="example-showcase" data-v-72294632><!--[--><div style="max-width:600px;" data-v-37e05446><div class="el-alert el-alert--success is-dark" role="alert" data-v-37e05446><!--v-if--><div class="el-alert__content"><span class="el-alert__title"><!--[-->Success alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--info is-dark" role="alert" data-v-37e05446><!--v-if--><div class="el-alert__content"><span class="el-alert__title"><!--[-->Info alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--warning is-dark" role="alert" data-v-37e05446><!--v-if--><div class="el-alert__content"><span class="el-alert__title"><!--[-->Warning alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--error is-dark" role="alert" data-v-37e05446><!--v-if--><div class="el-alert__content"><span class="el-alert__title"><!--[-->Error alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div></div><!--]--></div><div class="el-divider el-divider--horizontal m-0" style="--el-border-style:solid;" role="separator" data-v-72294632><!--v-if--></div><div class="op-btns" data-v-72294632><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Edit in Playground" tabindex="0" role="link" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M16 2v2h-1v3.243c0 1.158.251 2.301.736 3.352l4.282 9.276A1.5 1.5 0 0 1 18.656 22H5.344a1.5 1.5 0 0 1-1.362-2.129l4.282-9.276A7.994 7.994 0 0 0 9 7.243V4H8V2h8zm-2.612 8.001h-2.776c-.104.363-.23.721-.374 1.071l-.158.361L6.125 20h11.749l-3.954-8.567a9.978 9.978 0 0 1-.532-1.432zM11 7.243c0 .253-.01.506-.029.758h2.058a8.777 8.777 0 0 1-.021-.364L13 7.243V4h-2v3.243z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn github el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;color:var(--text-color-light);" data-v-72294632><!--[--><a href="https://github.com/element-plus/element-plus/edit/dev/docs/examples/alert/theme.vue" aria-label="Edit on GitHub" rel="noreferrer noopener" target="_blank" data-v-72294632><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z"></path></svg></a><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Copy code" tabindex="0" role="button" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><button aria-label="View source" class="reset-btn el-icon op-btn el-tooltip__trigger el-tooltip__trigger" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"></path></svg><!--]--></i></button><!--teleport start--><!--teleport end--><!--]--></div><div style="display:none;" class="example-source-wrapper" data-v-72294632 data-v-92bf09f8><div class="example-source" data-v-92bf09f8><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">600</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Success alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"success"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Info alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"info"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Warning alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"warning"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Error alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"error"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> effect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"dark"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> scoped</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">.el-alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">.el-alert:first-child</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span></code></pre>
</div></div></div><div style="display:none;" class="example-float-control" tabindex="0" role="button" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-72294632><path fill="currentColor" d="M512 320 192 704h639.936z"></path></svg><!--]--></i><span data-v-72294632>Hide source</span></div></div><!--]--><h2 id="customizable-close-button" tabindex="-1">Customizable Close Button <a class="header-anchor vp-link" href="#customizable-close-button" aria-label="Permalink to &quot;Customizable Close Button&quot;">​</a></h2><p>Customize the close button as texts or other symbols.</p><!--[--><div text="sm" m="y-4" data-v-72294632><p>Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. <code>closable</code> attribute decides if the component can be closed or not. It accepts <code>boolean</code>, and the default is <code>true</code>. You can set <code>close-text</code> attribute to replace the default cross symbol as the close button. Be careful that <code>close-text</code> must be a string. <code>close</code> event fires when the component is closed.</p>
</div><div class="example" data-v-72294632><div class="example-showcase" data-v-72294632><!--[--><div style="max-width:600px;" data-v-b35ebe60><div class="el-alert el-alert--success is-light" role="alert" data-v-b35ebe60><!--v-if--><div class="el-alert__content"><span class="el-alert__title"><!--[-->Unclosable alert<!--]--></span><!--v-if--><!--v-if--></div></div><div class="el-alert el-alert--info is-light" role="alert" data-v-b35ebe60><!--v-if--><div class="el-alert__content"><span class="el-alert__title"><!--[-->Customized close text<!--]--></span><!--v-if--><!--[--><div class="el-alert__close-btn is-customed">Gotcha</div><!--]--></div></div><div class="el-alert el-alert--warning is-light" role="alert" data-v-b35ebe60><!--v-if--><div class="el-alert__content"><span class="el-alert__title"><!--[-->Alert with callback<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div></div><!--]--></div><div class="el-divider el-divider--horizontal m-0" style="--el-border-style:solid;" role="separator" data-v-72294632><!--v-if--></div><div class="op-btns" data-v-72294632><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Edit in Playground" tabindex="0" role="link" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M16 2v2h-1v3.243c0 1.158.251 2.301.736 3.352l4.282 9.276A1.5 1.5 0 0 1 18.656 22H5.344a1.5 1.5 0 0 1-1.362-2.129l4.282-9.276A7.994 7.994 0 0 0 9 7.243V4H8V2h8zm-2.612 8.001h-2.776c-.104.363-.23.721-.374 1.071l-.158.361L6.125 20h11.749l-3.954-8.567a9.978 9.978 0 0 1-.532-1.432zM11 7.243c0 .253-.01.506-.029.758h2.058a8.777 8.777 0 0 1-.021-.364L13 7.243V4h-2v3.243z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn github el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;color:var(--text-color-light);" data-v-72294632><!--[--><a href="https://github.com/element-plus/element-plus/edit/dev/docs/examples/alert/close-button.vue" aria-label="Edit on GitHub" rel="noreferrer noopener" target="_blank" data-v-72294632><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z"></path></svg></a><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Copy code" tabindex="0" role="button" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><button aria-label="View source" class="reset-btn el-icon op-btn el-tooltip__trigger el-tooltip__trigger" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"></path></svg><!--]--></i></button><!--teleport start--><!--teleport end--><!--]--></div><div style="display:none;" class="example-source-wrapper" data-v-72294632 data-v-92bf09f8><div class="example-source" data-v-92bf09f8><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">600</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Unclosable alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"success"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> :</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">closable</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">false</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Customized close text"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"info"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> close-text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Gotcha"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Alert with callback"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"warning"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> @</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">close</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">hello</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"ts"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> hello</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D">  // eslint-disable-next-line no-alert</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">  alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">'Hello World!'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> scoped</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">.el-alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">.el-alert:first-child</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span></code></pre>
</div></div></div><div style="display:none;" class="example-float-control" tabindex="0" role="button" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-72294632><path fill="currentColor" d="M512 320 192 704h639.936z"></path></svg><!--]--></i><span data-v-72294632>Hide source</span></div></div><!--]--><h2 id="with-icon" tabindex="-1">With Icon <a class="header-anchor vp-link" href="#with-icon" aria-label="Permalink to &quot;With Icon&quot;">​</a></h2><p>Displaying an icon improves readability.</p><!--[--><div text="sm" m="y-4" data-v-72294632><p>Setting the <code>show-icon</code> attribute displays an icon that corresponds with the current Alert type.</p>
</div><div class="example" data-v-72294632><div class="example-showcase" data-v-72294632><!--[--><div style="max-width:600px;" data-v-dbfa1344><div class="el-alert el-alert--success is-light" role="alert" data-v-dbfa1344><i class="el-icon el-alert__icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg><!--]--></i><div class="el-alert__content"><span class="el-alert__title"><!--[-->Success alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--info is-light" role="alert" data-v-dbfa1344><i class="el-icon el-alert__icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896.064A448 448 0 0 1 512 64m67.2 275.072c33.28 0 60.288-23.104 60.288-57.344s-27.072-57.344-60.288-57.344c-33.28 0-60.16 23.104-60.16 57.344s26.88 57.344 60.16 57.344M590.912 699.2c0-6.848 2.368-24.64 1.024-34.752l-52.608 60.544c-10.88 11.456-24.512 19.392-30.912 17.28a12.992 12.992 0 0 1-8.256-14.72l87.68-276.992c7.168-35.136-12.544-67.2-54.336-71.296-44.096 0-108.992 44.736-148.48 101.504 0 6.784-1.28 23.68.064 33.792l52.544-60.608c10.88-11.328 23.552-19.328 29.952-17.152a12.8 12.8 0 0 1 7.808 16.128L388.48 728.576c-10.048 32.256 8.96 63.872 55.04 71.04 67.84 0 107.904-43.648 147.456-100.416z"></path></svg><!--]--></i><div class="el-alert__content"><span class="el-alert__title"><!--[-->Info alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--warning is-light" role="alert" data-v-dbfa1344><i class="el-icon el-alert__icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 192a58.432 58.432 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.432 58.432 0 0 0 512 256m0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4"></path></svg><!--]--></i><div class="el-alert__content"><span class="el-alert__title"><!--[-->Warning alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--error is-light" role="alert" data-v-dbfa1344><i class="el-icon el-alert__icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336z"></path></svg><!--]--></i><div class="el-alert__content"><span class="el-alert__title"><!--[-->Error alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div></div><!--]--></div><div class="el-divider el-divider--horizontal m-0" style="--el-border-style:solid;" role="separator" data-v-72294632><!--v-if--></div><div class="op-btns" data-v-72294632><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Edit in Playground" tabindex="0" role="link" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M16 2v2h-1v3.243c0 1.158.251 2.301.736 3.352l4.282 9.276A1.5 1.5 0 0 1 18.656 22H5.344a1.5 1.5 0 0 1-1.362-2.129l4.282-9.276A7.994 7.994 0 0 0 9 7.243V4H8V2h8zm-2.612 8.001h-2.776c-.104.363-.23.721-.374 1.071l-.158.361L6.125 20h11.749l-3.954-8.567a9.978 9.978 0 0 1-.532-1.432zM11 7.243c0 .253-.01.506-.029.758h2.058a8.777 8.777 0 0 1-.021-.364L13 7.243V4h-2v3.243z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn github el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;color:var(--text-color-light);" data-v-72294632><!--[--><a href="https://github.com/element-plus/element-plus/edit/dev/docs/examples/alert/icon.vue" aria-label="Edit on GitHub" rel="noreferrer noopener" target="_blank" data-v-72294632><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z"></path></svg></a><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Copy code" tabindex="0" role="button" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><button aria-label="View source" class="reset-btn el-icon op-btn el-tooltip__trigger el-tooltip__trigger" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"></path></svg><!--]--></i></button><!--teleport start--><!--teleport end--><!--]--></div><div style="display:none;" class="example-source-wrapper" data-v-72294632 data-v-92bf09f8><div class="example-source" data-v-92bf09f8><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">600</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Success alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"success"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> show-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Info alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"info"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> show-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Warning alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"warning"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> show-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Error alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"error"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> show-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> scoped</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">.el-alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">.el-alert:first-child</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span></code></pre>
</div></div></div><div style="display:none;" class="example-float-control" tabindex="0" role="button" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-72294632><path fill="currentColor" d="M512 320 192 704h639.936z"></path></svg><!--]--></i><span data-v-72294632>Hide source</span></div></div><!--]--><h2 id="centered-text" tabindex="-1">Centered Text <a class="header-anchor vp-link" href="#centered-text" aria-label="Permalink to &quot;Centered Text&quot;">​</a></h2><p>Use the <code>center</code> attribute to center the text.</p><!--[--><div text="sm" m="y-4" data-v-72294632></div><div class="example" data-v-72294632><div class="example-showcase" data-v-72294632><!--[--><div style="max-width:600px;" data-v-53594def><div class="el-alert el-alert--success is-center is-light" role="alert" data-v-53594def><i class="el-icon el-alert__icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg><!--]--></i><div class="el-alert__content"><span class="el-alert__title"><!--[-->Success alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--info is-center is-light" role="alert" data-v-53594def><i class="el-icon el-alert__icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896.064A448 448 0 0 1 512 64m67.2 275.072c33.28 0 60.288-23.104 60.288-57.344s-27.072-57.344-60.288-57.344c-33.28 0-60.16 23.104-60.16 57.344s26.88 57.344 60.16 57.344M590.912 699.2c0-6.848 2.368-24.64 1.024-34.752l-52.608 60.544c-10.88 11.456-24.512 19.392-30.912 17.28a12.992 12.992 0 0 1-8.256-14.72l87.68-276.992c7.168-35.136-12.544-67.2-54.336-71.296-44.096 0-108.992 44.736-148.48 101.504 0 6.784-1.28 23.68.064 33.792l52.544-60.608c10.88-11.328 23.552-19.328 29.952-17.152a12.8 12.8 0 0 1 7.808 16.128L388.48 728.576c-10.048 32.256 8.96 63.872 55.04 71.04 67.84 0 107.904-43.648 147.456-100.416z"></path></svg><!--]--></i><div class="el-alert__content"><span class="el-alert__title"><!--[-->Info alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--warning is-center is-light" role="alert" data-v-53594def><i class="el-icon el-alert__icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 192a58.432 58.432 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.432 58.432 0 0 0 512 256m0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4"></path></svg><!--]--></i><div class="el-alert__content"><span class="el-alert__title"><!--[-->Warning alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--error is-center is-light" role="alert" data-v-53594def><i class="el-icon el-alert__icon" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336z"></path></svg><!--]--></i><div class="el-alert__content"><span class="el-alert__title"><!--[-->Error alert<!--]--></span><!--v-if--><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div></div><!--]--></div><div class="el-divider el-divider--horizontal m-0" style="--el-border-style:solid;" role="separator" data-v-72294632><!--v-if--></div><div class="op-btns" data-v-72294632><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Edit in Playground" tabindex="0" role="link" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M16 2v2h-1v3.243c0 1.158.251 2.301.736 3.352l4.282 9.276A1.5 1.5 0 0 1 18.656 22H5.344a1.5 1.5 0 0 1-1.362-2.129l4.282-9.276A7.994 7.994 0 0 0 9 7.243V4H8V2h8zm-2.612 8.001h-2.776c-.104.363-.23.721-.374 1.071l-.158.361L6.125 20h11.749l-3.954-8.567a9.978 9.978 0 0 1-.532-1.432zM11 7.243c0 .253-.01.506-.029.758h2.058a8.777 8.777 0 0 1-.021-.364L13 7.243V4h-2v3.243z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn github el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;color:var(--text-color-light);" data-v-72294632><!--[--><a href="https://github.com/element-plus/element-plus/edit/dev/docs/examples/alert/center.vue" aria-label="Edit on GitHub" rel="noreferrer noopener" target="_blank" data-v-72294632><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z"></path></svg></a><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Copy code" tabindex="0" role="button" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><button aria-label="View source" class="reset-btn el-icon op-btn el-tooltip__trigger el-tooltip__trigger" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"></path></svg><!--]--></i></button><!--teleport start--><!--teleport end--><!--]--></div><div style="display:none;" class="example-source-wrapper" data-v-72294632 data-v-92bf09f8><div class="example-source" data-v-92bf09f8><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">600</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Success alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"success"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> center</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> show-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Info alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"info"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> center</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> show-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Warning alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"warning"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> center</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> show-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Error alert"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"error"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> center</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> show-icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> scoped</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">.el-alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">.el-alert:first-child</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span></code></pre>
</div></div></div><div style="display:none;" class="example-float-control" tabindex="0" role="button" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-72294632><path fill="currentColor" d="M512 320 192 704h639.936z"></path></svg><!--]--></i><span data-v-72294632>Hide source</span></div></div><!--]--><h2 id="with-description" tabindex="-1">With Description <a class="header-anchor vp-link" href="#with-description" aria-label="Permalink to &quot;With Description&quot;">​</a></h2><p>Description includes a message with more detailed information.</p><!--[--><div text="sm" m="y-4" data-v-72294632><p>Besides the required <code>title</code> attribute, you can add a <code>description</code> attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.</p>
</div><div class="example" data-v-72294632><div class="example-showcase" data-v-72294632><!--[--><div style="max-width:600px;"><div class="el-alert el-alert--success is-light" role="alert"><!--v-if--><div class="el-alert__content"><span class="el-alert__title with-description"><!--[-->With description<!--]--></span><p class="el-alert__description"><!--[-->This is a description.<!--]--></p><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div></div><!--]--></div><div class="el-divider el-divider--horizontal m-0" style="--el-border-style:solid;" role="separator" data-v-72294632><!--v-if--></div><div class="op-btns" data-v-72294632><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Edit in Playground" tabindex="0" role="link" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M16 2v2h-1v3.243c0 1.158.251 2.301.736 3.352l4.282 9.276A1.5 1.5 0 0 1 18.656 22H5.344a1.5 1.5 0 0 1-1.362-2.129l4.282-9.276A7.994 7.994 0 0 0 9 7.243V4H8V2h8zm-2.612 8.001h-2.776c-.104.363-.23.721-.374 1.071l-.158.361L6.125 20h11.749l-3.954-8.567a9.978 9.978 0 0 1-.532-1.432zM11 7.243c0 .253-.01.506-.029.758h2.058a8.777 8.777 0 0 1-.021-.364L13 7.243V4h-2v3.243z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn github el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;color:var(--text-color-light);" data-v-72294632><!--[--><a href="https://github.com/element-plus/element-plus/edit/dev/docs/examples/alert/description.vue" aria-label="Edit on GitHub" rel="noreferrer noopener" target="_blank" data-v-72294632><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z"></path></svg></a><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Copy code" tabindex="0" role="button" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><button aria-label="View source" class="reset-btn el-icon op-btn el-tooltip__trigger el-tooltip__trigger" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"></path></svg><!--]--></i></button><!--teleport start--><!--teleport end--><!--]--></div><div style="display:none;" class="example-source-wrapper" data-v-72294632 data-v-92bf09f8><div class="example-source" data-v-92bf09f8><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">600</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"With description"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"success"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      description</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"This is a description."</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span></code></pre>
</div></div></div><div style="display:none;" class="example-float-control" tabindex="0" role="button" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-72294632><path fill="currentColor" d="M512 320 192 704h639.936z"></path></svg><!--]--></i><span data-v-72294632>Hide source</span></div></div><!--]--><h2 id="with-icon-and-description" tabindex="-1">With Icon and Description <a class="header-anchor vp-link" href="#with-icon-and-description" aria-label="Permalink to &quot;With Icon and Description&quot;">​</a></h2><!--[--><div text="sm" m="y-4" data-v-72294632><p>At last, this is an example with both icon and description.</p>
</div><div class="example" data-v-72294632><div class="example-showcase" data-v-72294632><!--[--><div style="max-width:600px;" data-v-ff30e50a><div class="el-alert el-alert--success is-light" role="alert" data-v-ff30e50a><i class="el-icon el-alert__icon is-big" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg><!--]--></i><div class="el-alert__content"><span class="el-alert__title with-description"><!--[-->Success alert<!--]--></span><p class="el-alert__description"><!--[-->More text description<!--]--></p><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--info is-light" role="alert" data-v-ff30e50a><i class="el-icon el-alert__icon is-big" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896.064A448 448 0 0 1 512 64m67.2 275.072c33.28 0 60.288-23.104 60.288-57.344s-27.072-57.344-60.288-57.344c-33.28 0-60.16 23.104-60.16 57.344s26.88 57.344 60.16 57.344M590.912 699.2c0-6.848 2.368-24.64 1.024-34.752l-52.608 60.544c-10.88 11.456-24.512 19.392-30.912 17.28a12.992 12.992 0 0 1-8.256-14.72l87.68-276.992c7.168-35.136-12.544-67.2-54.336-71.296-44.096 0-108.992 44.736-148.48 101.504 0 6.784-1.28 23.68.064 33.792l52.544-60.608c10.88-11.328 23.552-19.328 29.952-17.152a12.8 12.8 0 0 1 7.808 16.128L388.48 728.576c-10.048 32.256 8.96 63.872 55.04 71.04 67.84 0 107.904-43.648 147.456-100.416z"></path></svg><!--]--></i><div class="el-alert__content"><span class="el-alert__title with-description"><!--[-->Info alert<!--]--></span><p class="el-alert__description"><!--[-->More text description<!--]--></p><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--warning is-light" role="alert" data-v-ff30e50a><i class="el-icon el-alert__icon is-big" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 192a58.432 58.432 0 0 0-58.24 63.744l23.36 256.384a35.072 35.072 0 0 0 69.76 0l23.296-256.384A58.432 58.432 0 0 0 512 256m0 512a51.2 51.2 0 1 0 0-102.4 51.2 51.2 0 0 0 0 102.4"></path></svg><!--]--></i><div class="el-alert__content"><span class="el-alert__title with-description"><!--[-->Warning alert<!--]--></span><p class="el-alert__description"><!--[-->More text description<!--]--></p><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div><div class="el-alert el-alert--error is-light" role="alert" data-v-ff30e50a><i class="el-icon el-alert__icon is-big" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 393.664L407.936 353.6a38.4 38.4 0 1 0-54.336 54.336L457.664 512 353.6 616.064a38.4 38.4 0 1 0 54.336 54.336L512 566.336 616.064 670.4a38.4 38.4 0 1 0 54.336-54.336L566.336 512 670.4 407.936a38.4 38.4 0 1 0-54.336-54.336z"></path></svg><!--]--></i><div class="el-alert__content"><span class="el-alert__title with-description"><!--[-->Error alert<!--]--></span><p class="el-alert__description"><!--[-->More text description<!--]--></p><!--[--><i class="el-icon el-alert__close-btn" style=""><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024"><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg><!--]--></i><!--]--></div></div></div><!--]--></div><div class="el-divider el-divider--horizontal m-0" style="--el-border-style:solid;" role="separator" data-v-72294632><!--v-if--></div><div class="op-btns" data-v-72294632><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Edit in Playground" tabindex="0" role="link" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M16 2v2h-1v3.243c0 1.158.251 2.301.736 3.352l4.282 9.276A1.5 1.5 0 0 1 18.656 22H5.344a1.5 1.5 0 0 1-1.362-2.129l4.282-9.276A7.994 7.994 0 0 0 9 7.243V4H8V2h8zm-2.612 8.001h-2.776c-.104.363-.23.721-.374 1.071l-.158.361L6.125 20h11.749l-3.954-8.567a9.978 9.978 0 0 1-.532-1.432zM11 7.243c0 .253-.01.506-.029.758h2.058a8.777 8.777 0 0 1-.021-.364L13 7.243V4h-2v3.243z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn github el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;color:var(--text-color-light);" data-v-72294632><!--[--><a href="https://github.com/element-plus/element-plus/edit/dev/docs/examples/alert/icon-description.vue" aria-label="Edit on GitHub" rel="noreferrer noopener" target="_blank" data-v-72294632><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z"></path></svg></a><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><i class="el-icon op-btn el-tooltip__trigger el-tooltip__trigger" style="font-size:16px;" aria-label="Copy code" tabindex="0" role="button" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"></path></svg><!--]--></i><!--teleport start--><!--teleport end--><!--]--><!--[--><button aria-label="View source" class="reset-btn el-icon op-btn el-tooltip__trigger el-tooltip__trigger" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72294632><path fill="currentColor" d="m23 12l-7.071 7.071l-1.414-1.414L20.172 12l-5.657-5.657l1.414-1.414L23 12zM3.828 12l5.657 5.657l-1.414 1.414L1 12l7.071-7.071l1.414 1.414L3.828 12z"></path></svg><!--]--></i></button><!--teleport start--><!--teleport end--><!--]--></div><div style="display:none;" class="example-source-wrapper" data-v-72294632 data-v-92bf09f8><div class="example-source" data-v-92bf09f8><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0" v-pre=""><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">max-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">600</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Success alert"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"success"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      description</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"More text description"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      show-icon</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Info alert"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"info"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      description</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"More text description"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      show-icon</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Warning alert"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"warning"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      description</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"More text description"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      show-icon</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    &#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">el-alert</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"Error alert"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"error"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      description</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF">"More text description"</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">      show-icon</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">    /></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">  &#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">style</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0"> scoped</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">.el-alert</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">20</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0">.el-alert:first-child</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">  margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">&#x3C;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D">style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8">></span></span></code></pre>
</div></div></div><div style="display:none;" class="example-float-control" tabindex="0" role="button" data-v-72294632><i class="el-icon" style="font-size:16px;" data-v-72294632><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-72294632><path fill="currentColor" d="M512 320 192 704h639.936z"></path></svg><!--]--></i><span data-v-72294632>Hide source</span></div></div><!--]--><h2 id="alert-api" tabindex="-1">Alert API <a class="header-anchor vp-link" href="#alert-api" aria-label="Permalink to &quot;Alert API&quot;">​</a></h2><h3 id="attributes" tabindex="-1">Attributes <a class="header-anchor vp-link" href="#attributes" aria-label="Permalink to &quot;Attributes&quot;">​</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>title</td><td>alert title.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>type</td><td>alert type.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">enum</code><!----></span></td><td>info</td></tr><tr><td>description</td><td>descriptive text.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>closable</td><td>whether alert can be dismissed.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>true</td></tr><tr><td>center</td><td>whether content is placed in the center.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>close-text</td><td>customized close button text.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">string</code><!----></span></td><td>—</td></tr><tr><td>show-icon</td><td>whether a type icon is displayed.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">boolean</code><!----></span></td><td>false</td></tr><tr><td>effect</td><td>theme style.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">enum</code><!----></span></td><td>light</td></tr></tbody></table></div><h3 id="events" tabindex="-1">Events <a class="header-anchor vp-link" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th></tr></thead><tbody><tr><td>close</td><td>trigger when alert is closed.</td><td><span class="inline-flex items-center"><code class="api-typing mr-1">Function</code><!----></span></td></tr></tbody></table></div><h3 id="slots" tabindex="-1">Slots <a class="header-anchor vp-link" href="#slots" aria-label="Permalink to &quot;Slots&quot;">​</a></h3><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th></tr></thead><tbody><tr><td>default</td><td>content of the alert description.</td></tr><tr><td>title</td><td>content of the alert title.</td></tr></tbody></table></div><h2 id="source" tabindex="-1">Source <a class="header-anchor vp-link" href="#source" aria-label="Permalink to &quot;Source&quot;">​</a></h2><p><a href="https://github.com/element-plus/element-plus/tree/dev/packages/components/alert" class="vp-link" target="_blank" rel="noreferrer">Component<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> • <a href="https://github.com/element-plus/element-plus/tree/dev/packages/theme-chalk/src/alert.scss" class="vp-link" target="_blank" rel="noreferrer">Style<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> • <a href="https://github.com/element-plus/element-plus/blob/dev/docs/en-US/component/alert.md" class="vp-link" target="_blank" rel="noreferrer">Docs<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a></p><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor vp-link" href="#contributors" aria-label="Permalink to &quot;Contributors&quot;">​</a></h2><div class="mb-4" data-v-a7f8c63c><div class="flex flex-wrap gap-4 pt-2" data-v-a7f8c63c><!--[--><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/sxzz" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/6481596?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> 三咲智子<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/YunYouJun" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/25154432?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> 云游君<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/jw-foss" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/15975785?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> Jeremy<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/chenxch" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/23251408?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> Xc<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/emojiiii" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/30518686?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> C.Y.Kun<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/adaex" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/29560987?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> Aex<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/makedopamine" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/93767616?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> dopamine<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/kooriookami" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/38392315?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> kooriookami<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/sleepyShen1989" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/109908413?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> sleepyShen1989<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/baiwusanyu-c" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/32354856?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> 白雾三语<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/ryuhangyeong" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/27342882?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> 류한경<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/purepear" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/144010?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> Delyan Haralanov<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/buqiyuan" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/39730999?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> bqy<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/cbbfcd" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/20987775?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> 波比小金刚<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/zwgwf" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/134276765?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> zwgwf<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/btea" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/24516654?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> btea<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/sleepyfive" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/36007710?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> Sleepy Five<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/Chris-Kin" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/10802869?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> on the field of hope<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/Hades-li" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/12124478?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> Hades-li<!--]--><!----></a></div><div data-v-a7f8c63c><a class="link-item link flex gap-2 items-center link" href="https://github.com/wzc520pyfm" target="_blank" rel="noopener noreferrer" data-v-a7f8c63c data-v-d0bc45d6><!--[--><img src="https://avatars.githubusercontent.com/u/69044080?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-a7f8c63c> wzc520pyfm<!--]--><!----></a></div><!--]--></div></div></div></div><footer class="page-footer" data-v-d3d41891><div class="edit" data-v-d3d41891><div class="edit-link" data-v-d3d41891 data-v-60059381><a class="link text-sm" href="https://github.com/element-plus/element-plus/edit/dev/docs/en-US/component/alert.md" target="_blank" rel="noopener noreferrer" data-v-60059381>Edit this page on GitHub <i class="el-icon" style="font-size:16px;vertical-align:text-top;line-height:24px;" data-v-60059381><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-60059381><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg><!--]--></i></a></div></div></footer><div class="next-and-prev-link" data-v-1e11dad2><div class="container" data-v-1e11dad2><div class="prev" data-v-1e11dad2><a class="link" href="/en-US/component/tabs" data-v-1e11dad2><i class="el-icon mr-1" style="" data-v-1e11dad2><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-1e11dad2><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i><span class="text" data-v-1e11dad2>Tabs</span></a></div><div class="next" data-v-1e11dad2><a class="link" href="/en-US/component/dialog" data-v-1e11dad2><span class="text" data-v-1e11dad2>Dialog</span><i class="el-icon ml-1" style="" data-v-1e11dad2><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-1e11dad2><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i></a></div></div></div></div><aside class="toc-wrapper" data-v-7bfe172f><nav class="toc-content" data-v-7bfe172f><h3 class="toc-content__heading" data-v-7bfe172f>Contents</h3><div class="el-anchor el-anchor--vertical" data-v-7bfe172f><div class="el-anchor__marker" style=""></div><div class="el-anchor__list"><!--[--><!--[--><div class="el-anchor__item" data-v-7bfe172f><a class="el-anchor__link" href="#basic-usage"><!--[--><div data-v-7bfe172f>Basic Usage</div><!--]--></a><div class="el-anchor__list"><!--[--><!--]--></div></div><div class="el-anchor__item" data-v-7bfe172f><a class="el-anchor__link" href="#theme"><!--[--><div data-v-7bfe172f>Theme</div><!--]--></a><div class="el-anchor__list"><!--[--><!--]--></div></div><div class="el-anchor__item" data-v-7bfe172f><a class="el-anchor__link" href="#customizable-close-button"><!--[--><div data-v-7bfe172f>Customizable Close Button</div><!--]--></a><div class="el-anchor__list"><!--[--><!--]--></div></div><div class="el-anchor__item" data-v-7bfe172f><a class="el-anchor__link" href="#with-icon"><!--[--><div data-v-7bfe172f>With Icon</div><!--]--></a><div class="el-anchor__list"><!--[--><!--]--></div></div><div class="el-anchor__item" data-v-7bfe172f><a class="el-anchor__link" href="#centered-text"><!--[--><div data-v-7bfe172f>Centered Text</div><!--]--></a><div class="el-anchor__list"><!--[--><!--]--></div></div><div class="el-anchor__item" data-v-7bfe172f><a class="el-anchor__link" href="#with-description"><!--[--><div data-v-7bfe172f>With Description</div><!--]--></a><div class="el-anchor__list"><!--[--><!--]--></div></div><div class="el-anchor__item" data-v-7bfe172f><a class="el-anchor__link" href="#with-icon-and-description"><!--[--><div data-v-7bfe172f>With Icon and Description</div><!--]--></a><div class="el-anchor__list"><!--[--><!--]--></div></div><div class="el-anchor__item" data-v-7bfe172f><a class="el-anchor__link" href="#alert-api"><!--[--><div data-v-7bfe172f>Alert API</div><!--]--></a><div class="el-anchor__list"><!--[--><!--[--><div class="el-anchor__item" data-v-7bfe172f><a class="el-anchor__link" href="#attributes"><!--[--><div data-v-7bfe172f>Attributes</div><!--]--></a><!--v-if--></div><div class="el-anchor__item" data-v-7bfe172f><a class="el-anchor__link" href="#events"><!--[--><div data-v-7bfe172f>Events</div><!--]--></a><!--v-if--></div><div class="el-anchor__item" data-v-7bfe172f><a class="el-anchor__link" href="#slots"><!--[--><div data-v-7bfe172f>Slots</div><!--]--></a><!--v-if--></div><!--]--><!--]--></div></div><div class="el-anchor__item" data-v-7bfe172f><a class="el-anchor__link" href="#source"><!--[--><div data-v-7bfe172f>Source</div><!--]--></a><div class="el-anchor__list"><!--[--><!--]--></div></div><div class="el-anchor__item" data-v-7bfe172f><a class="el-anchor__link" href="#contributors"><!--[--><div data-v-7bfe172f>Contributors</div><!--]--></a><div class="el-anchor__list"><!--[--><!--]--></div></div><!--]--><!--]--></div></div><p class="text-14px font-300 color-$text-color-secondary" data-v-7bfe172f>Sponsored by</p><div class="join sponsors-button mt-4 w-100%" data-v-7bfe172f><!--[--><a href="mailto:element-plus@outlook.com" target="_blank" class="el-tooltip__trigger"><button ariadisabled="false" type="button" class="el-button" style="overflow:hidden;"><!--v-if--><span class=""><!--[-->Become a Sponsor!<!--]--></span></button></a><!--teleport start--><!--teleport end--><!--]--></div><div class="right-big" data-v-7bfe172f data-v-3c6f7f06><!--[--><a href="http://github.crmeb.net/u/Elementyouce" title="CRMEB - 高品质开源商城系统 累计服务40W+开发者" target="_blank" data-v-3c6f7f06><div class="flex bg-#F9F9F9 h-64px rd-4px justify-center items-center" data-v-3c6f7f06><div class="h-36px" data-v-3c6f7f06><img class="rd-4px h-full" src="/images/sponsors/CRMEB-l.png" alt="CRMEB" data-v-3c6f7f06></div></div></a><!--]--></div><div class="flex flex-wrap justify-between right-small" data-v-7bfe172f data-v-8cecf616><!--[--><!--[--><a href="https://doc.buildadmin.com/?from=element-plus" title="BuildAdmin - Vue3企业级开源后台管理系统" target="_blank" data-v-8cecf616><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-8cecf616><img src="/images/sponsors/buildadmin-l.png" alt="BuildAdmin" data-v-8cecf616></div></a><!--]--><!--[--><a href="http://www.i-renderer.love/home/index" title="百搭云 - 快速且优雅的低代码平台" target="_blank" data-v-8cecf616><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-8cecf616><img src="/images/sponsors/baidayun.png" alt="百搭云" data-v-8cecf616></div></a><!--]--><!--[--><a href="https://bit.dev/?from=element-ui" title="bit - Share Code" target="_blank" data-v-8cecf616><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-8cecf616><img src="/images/bit-l.png" alt="bit" data-v-8cecf616></div></a><!--]--><!--[--><div class="flex bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-8cecf616><div class="color-#ddd text-13px cursor-default" data-v-8cecf616>Your logo</div></div><!--]--><!--]--></div><div class="right-rich" data-v-7bfe172f data-v-2b27a114><!--[--><!--]--></div></nav></aside></div><footer class="footer"><div class="footer-main"><h4>Links</h4><a href="https://github.com/element-plus/element-plus" class="footer-main-link" target="_blank">GitHub</a><a href="https://cn.element-plus.org/zh-CN/" class="footer-main-link" target="_blank">China Mirror 🇨🇳</a><a href="https://github.com/element-plus/element-plus/releases" class="footer-main-link" target="_blank">Changelog</a><a href="https://element.eleme.io/" class="footer-main-link" target="_blank">Element UI for Vue 2</a></div><div class="footer-main"><h4>Community</h4><a href="https://discord.com/invite/gXK9XNzW3X" class="footer-main-link" target="_blank">Discord</a><a href="https://github.com/element-plus/element-plus/issues" class="footer-main-link" target="_blank">Feedback</a><a href="https://github.com/element-plus/element-plus/blob/dev/.github/CONTRIBUTING.en-US.md" class="footer-main-link" target="_blank">Contribution</a><a href="https://segmentfault.com/t/element-plus" class="footer-main-link" target="_blank">SegmentFault</a></div></footer></main></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"es-es_component_overview.md\":\"sQoZatX9\",\"en-us_component_overview.md\":\"B-UHOZl9\",\"zh-cn_component_breadcrumb.md\":\"DGxDEIK2\",\"zh-cn_component_backtop.md\":\"DhMbjDUx\",\"zh-cn_component_overview.md\":\"BquN1ahR\",\"zh-cn_component_empty.md\":\"BpHg3aJJ\",\"zh-cn_guide_translation.md\":\"Dr9uqmqX\",\"zh-cn_guide_design.md\":\"C_8LPotI\",\"zh-cn_component_border.md\":\"BanmvXY6\",\"zh-cn_component_tree-select.md\":\"DgCp5XRY\",\"zh-cn_guide_transitions.md\":\"D8L0zSi7\",\"en-us_component_backtop.md\":\"DSVoq7le\",\"en-us_component_border.md\":\"0AWH44Bm\",\"en-us_guide_dark-mode.md\":\"DKSXTXjw\",\"en-us_component_breadcrumb.md\":\"DLAh-3p_\",\"en-us_index.md\":\"apytNG3y\",\"en-us_resource_index.md\":\"DJqflRiF\",\"es-es_component_border.md\":\"TzY12A3_\",\"zh-cn_component_watermark.md\":\"A024A5qB\",\"zh-cn_component_infinite-scroll.md\":\"CjuCtyPO\",\"zh-cn_component_alert.md\":\"cVWXED3i\",\"es-es_resource_index.md\":\"BMkoCmQ2\",\"index.md\":\"CgX9lqrn\",\"zh-cn_component_loading.md\":\"DsGU-Qj8\",\"zh-cn_component_affix.md\":\"M5Wkzy_h\",\"zh-cn_component_tooltip-v2.md\":\"ColJQINZ\",\"es-es_index.md\":\"DaNeV-Ar\",\"zh-cn_component_result.md\":\"Ci0c5ODJ\",\"zh-cn_component_skeleton.md\":\"CZ3zN6Kh\",\"zh-cn_guide_dev-faq.md\":\"DxOiOLPv\",\"zh-cn_component_layout.md\":\"Dr5y2xHh\",\"zh-cn_guide_i18n.md\":\"BcrRsIr-\",\"zh-cn_guide_commit-examples.md\":\"BpDEgg2b\",\"zh-cn_guide_dark-mode.md\":\"1lb-EZsq\",\"zh-cn_index.md\":\"DipYR9Ey\",\"zh-cn_resource_index.md\":\"B0lAnbUk\",\"zh-cn_guide_nav.md\":\"IR_hqtEI\",\"en-us_component_badge.md\":\"DSffW1_c\",\"en-us_component_alert.md\":\"CaJ6--CJ\",\"zh-cn_component_page-header.md\":\"BbF2LAPr\",\"es-es_component_infinite-scroll.md\":\"CcxNzaa4\",\"en-us_component_collapse.md\":\"7IeLHEoz\",\"zh-cn_component_container.md\":\"C8hZCrRF\",\"zh-cn_component_segmented.md\":\"D1JFD4Kx\",\"zh-cn_guide_migration.md\":\"HlPSByNE\",\"zh-cn_component_avatar.md\":\"C-BHbpHS\",\"zh-cn_guide_changelog.md\":\"JZeTyhxS\",\"zh-cn_component_collapse.md\":\"H6vF1de6\",\"en-us_component_calendar.md\":\"BSdDBSpB\",\"en-us_component_result.md\":\"Blx1FH7Q\",\"zh-cn_component_drawer.md\":\"Cl3R8B55\",\"en-us_component_card.md\":\"CeClAgJK\",\"es-es_component_segmented.md\":\"BtsR3vBp\",\"zh-cn_component_card.md\":\"UPgi9TOR\",\"en-us_component_segmented.md\":\"DCo7527t\",\"en-us_component_button.md\":\"BKAEn6f8\",\"en-us_component_carousel.md\":\"BseVyeUV\",\"en-us_component_autocomplete.md\":\"CprxZQtI\",\"en-us_component_color-picker.md\":\"OoxS-o1x\",\"zh-cn_component_dialog.md\":\"Bk4J87gH\",\"en-us_component_checkbox.md\":\"CDCNt1q0\",\"en-us_component_drawer.md\":\"Bc9WQe6G\",\"en-us_component_empty.md\":\"DbkcUN36\",\"en-us_component_icon.md\":\"BcpHTJsq\",\"en-us_component_message.md\":\"BsEU0o3e\",\"en-us_component_menu.md\":\"C8eOWr8T\",\"en-us_component_date-picker.md\":\"UbBGLRRy\",\"en-us_component_infinite-scroll.md\":\"DYKQ1h24\",\"en-us_component_popover.md\":\"CoIBWPnb\",\"en-us_component_dropdown.md\":\"oVP8DmuJ\",\"en-us_component_page-header.md\":\"C3ArGDdX\",\"en-us_component_dialog.md\":\"BUCIx28R\",\"en-us_component_radio.md\":\"BZl10nu-\",\"en-us_component_notification.md\":\"DvVFNS9i\",\"en-us_component_descriptions.md\":\"Da0JwBXs\",\"es-es_component_input.md\":\"CH8tYH_d\",\"es-es_component_icon.md\":\"jtQwMyQs\",\"es-es_component_form.md\":\"cZSGNC2K\",\"en-us_component_config-provider.md\":\"4h6IMoUG\",\"en-us_guide_i18n.md\":\"CXhDVojW\",\"es-es_component_pagination.md\":\"ChsBVOL7\",\"es-es_component_popconfirm.md\":\"DM5N4d5h\",\"es-es_component_timeline.md\":\"UbaByDD7\",\"en-us_guide_dev-guide.md\":\"-8br4zaP\",\"en-us_guide_installation.md\":\"BPV7tanP\",\"es-es_component_rate.md\":\"BmeJKuFZ\",\"es-es_component_steps.md\":\"Ct8cSiyN\",\"es-es_component_config-provider.md\":\"D-WbfSFw\",\"es-es_component_layout.md\":\"C1OfYefX\",\"en-us_component_slider.md\":\"BBkV6S-U\",\"en-us_component_transfer.md\":\"Dkd4qZxw\",\"es-es_component_space.md\":\"1D8EctEI\",\"es-es_component_mention.md\":\"djXh8oUq\",\"es-es_component_badge.md\":\"C2N8x0Or\",\"es-es_component_skeleton.md\":\"DhRN3hl9\",\"en-us_component_tree-select.md\":\"DOOc6nOl\",\"en-us_component_typography.md\":\"B-5WYduF\",\"en-us_component_tree.md\":\"DCKh_4og\",\"es-es_component_popover.md\":\"DG_99Hid\",\"es-es_component_text.md\":\"DPo85KDr\",\"en-us_guide_migration.md\":\"BSZ6idWb\",\"es-es_component_time-select.md\":\"BF0FfdAt\",\"es-es_component_result.md\":\"ByRVuqP5\",\"es-es_component_time-picker.md\":\"yDoO57-X\",\"en-us_guide_namespace.md\":\"BCfmz8DC\",\"es-es_component_tooltip.md\":\"C6c7rCJL\",\"es-es_component_link.md\":\"bwObVZ46\",\"es-es_component_tooltip-v2.md\":\"DTP0fQiq\",\"es-es_component_tour.md\":\"C1GzdHbv\",\"es-es_component_transfer.md\":\"Bt43qKrE\",\"es-es_component_loading.md\":\"d8PdcdMU\",\"es-es_component_tree-select.md\":\"DO2T5E5A\",\"es-es_component_typography.md\":\"BqUndUCt\",\"es-es_component_input-number.md\":\"n0ZxK-cx\",\"es-es_component_tree-v2.md\":\"CQVu_VLq\",\"es-es_guide_changelog.md\":\"B4WWzcwa\",\"es-es_guide_commit-examples.md\":\"Bd_V6ky8\",\"es-es_guide_dark-mode.md\":\"uNj1J4Im\",\"es-es_guide_design.md\":\"IgpbAWwX\",\"es-es_guide_dev-guide.md\":\"D9WoA0hq\",\"es-es_guide_i18n.md\":\"CkR3hpg2\",\"es-es_component_upload.md\":\"DGqLhIVH\",\"es-es_guide_dev-faq.md\":\"CenNmYyk\",\"es-es_component_tree.md\":\"CZ9dVEEm\",\"es-es_guide_installation.md\":\"BEO2nV14\",\"zh-cn_component_config-provider.md\":\"VgZhk6Wr\",\"es-es_guide_quickstart.md\":\"CN-kjW1l\",\"es-es_guide_nav.md\":\"DZpwtuHV\",\"zh-cn_component_color-picker.md\":\"11B2hUCQ\",\"zh-cn_component_checkbox.md\":\"DothwVq8\",\"es-es_guide_migration.md\":\"BLo2wFbZ\",\"es-es_guide_namespace.md\":\"eW63BctQ\",\"es-es_guide_theming.md\":\"BafPsnjb\",\"es-es_guide_transitions.md\":\"CIid_hB1\",\"zh-cn_component_autocomplete.md\":\"Dl04X6-4\",\"es-es_guide_translation.md\":\"FhfM2rBU\",\"zh-cn_component_calendar.md\":\"CneXx5Ke\",\"en-us_guide_design.md\":\"ZGAKhQRQ\",\"es-es_component_notification.md\":\"E0lf2EXH\",\"zh-cn_component_badge.md\":\"DoxSXgPR\",\"zh-cn_component_cascader.md\":\"DQ105b9D\",\"en-us_guide_dev-faq.md\":\"pRDhAKPR\",\"zh-cn_component_carousel.md\":\"CjIHQe_v\",\"zh-cn_component_popover.md\":\"CCGYSy2I\",\"es-es_component_message-box.md\":\"CixifeLt\",\"en-us_component_progress.md\":\"BQulcWTZ\",\"en-us_component_select-v2.md\":\"Hu6NZmJO\",\"en-us_component_input-number.md\":\"D_dvZjM4\",\"en-us_component_select.md\":\"DEawzwpG\",\"en-us_component_input.md\":\"DJQNu3wy\",\"en-us_component_datetime-picker.md\":\"CIxnyNuQ\",\"en-us_component_mention.md\":\"KUHf72rD\",\"en-us_component_link.md\":\"CVliKNRE\",\"en-us_component_tag.md\":\"KWVsgD9f\",\"en-us_component_text.md\":\"CWSEZ3wp\",\"es-es_component_calendar.md\":\"DxbH0xbc\",\"en-us_component_cascader.md\":\"DeLVqXC-\",\"es-es_component_carousel.md\":\"Gf564JpS\",\"es-es_component_card.md\":\"DaaQV9RR\",\"es-es_component_checkbox.md\":\"CaQCNDzj\",\"es-es_component_color-picker.md\":\"Cg3OBhh8\",\"en-us_component_time-picker.md\":\"B7-Dsdmu\",\"es-es_component_collapse.md\":\"B8v_VEX0\",\"en-us_component_time-select.md\":\"gecZomR9\",\"en-us_component_statistic.md\":\"BEV69R7h\",\"en-us_component_timeline.md\":\"IhXj5ZjF\",\"en-us_component_tour.md\":\"B9O9NT_2\",\"en-us_component_tooltip-v2.md\":\"DYaPw2Y1\",\"en-us_guide_changelog.md\":\"BMDKPk3W\",\"es-es_component_container.md\":\"16pmq3oy\",\"en-us_component_skeleton.md\":\"CCKI-w4-\",\"es-es_component_button.md\":\"KvimZcti\",\"es-es_component_cascader.md\":\"CpN9zc4p\",\"es-es_component_descriptions.md\":\"O-_CduUR\",\"es-es_component_date-picker.md\":\"C9TUgR62\",\"es-es_component_datetime-picker.md\":\"D9mlyXCL\",\"es-es_component_drawer.md\":\"Bhe4cgAu\",\"en-us_component_pagination.md\":\"CrdBh2_p\",\"es-es_component_slider.md\":\"DKP3pHxd\",\"en-us_component_tree-v2.md\":\"SzBzLa7H\",\"en-us_component_message-box.md\":\"B217Gwqx\",\"es-es_component_empty.md\":\"2AlwVxmE\",\"en-us_component_upload.md\":\"87avIxXH\",\"es-es_component_dialog.md\":\"Bw6SVPZl\",\"es-es_component_progress.md\":\"CLedPKG-\",\"en-us_component_popconfirm.md\":\"BILL2n4r\",\"zh-cn_component_button.md\":\"BJeopcyl\",\"es-es_component_dropdown.md\":\"CydMU-aD\",\"zh-cn_component_statistic.md\":\"CInhcEIi\",\"es-es_component_radio.md\":\"BGbVwDK-\",\"zh-cn_component_steps.md\":\"CeQ39J86\",\"es-es_component_tag.md\":\"DvZJ0vIh\",\"es-es_guide_ssr.md\":\"D9Y3yiEd\",\"en-us_guide_quickstart.md\":\"CzflDkbG\",\"en-us_guide_ssr.md\":\"CtLJfUQI\",\"es-es_component_menu.md\":\"TxsLeSJx\",\"es-es_component_statistic.md\":\"BecjIPl0\",\"en-us_guide_transitions.md\":\"DARL9vmy\",\"zh-cn_component_radio.md\":\"DH8punGe\",\"zh-cn_component_progress.md\":\"Dc3yNjWl\",\"en-us_guide_nav.md\":\"Bi86SK8a\",\"zh-cn_component_scrollbar.md\":\"SPP_Edys\",\"zh-cn_component_slider.md\":\"CzRudoBs\",\"es-es_component_message.md\":\"DxjXAdlF\",\"zh-cn_component_text.md\":\"BnZAjPFy\",\"zh-cn_component_space.md\":\"hJ0OMjwt\",\"es-es_component_select-v2.md\":\"CNizWINW\",\"zh-cn_component_tour.md\":\"nvQMhNgc\",\"es-es_component_avatar.md\":\"Dw3UnwgU\",\"es-es_component_image.md\":\"SC6hPWIv\",\"zh-cn_component_transfer.md\":\"xnjjLrkJ\",\"zh-cn_guide_theming.md\":\"BTZkJ5IB\",\"en-us_component_color.md\":\"DQ_Kvwv4\",\"zh-cn_component_tree.md\":\"Uel-AFLY\",\"es-es_component_affix.md\":\"HN8-TGvn\",\"zh-cn_guide_dev-guide.md\":\"BV_pWwQI\",\"es-es_component_anchor.md\":\"GUhPr7-r\",\"es-es_component_scrollbar.md\":\"BJ4Sp1v7\",\"zh-cn_guide_namespace.md\":\"C_br_FjN\",\"es-es_component_watermark.md\":\"KWtMBSEF\",\"zh-cn_component_message.md\":\"BAoH4fXL\",\"zh-cn_component_tree-v2.md\":\"DZRwWT2C\",\"zh-cn_component_timeline.md\":\"CdW_NQV1\",\"zh-cn_component_upload.md\":\"3qbuGZ99\",\"zh-cn_component_anchor.md\":\"CVT9LC1f\",\"en-us_component_divider.md\":\"BqJ7mxyo\",\"zh-cn_component_notification.md\":\"BU8NUNSl\",\"en-us_component_tooltip.md\":\"BHeO0Doy\",\"es-es_component_select.md\":\"DEFlUHtD\",\"es-es_component_switch.md\":\"DrqsKEIN\",\"es-es_component_page-header.md\":\"CDbNJuMz\",\"es-es_component_color.md\":\"DCNV36fq\",\"zh-cn_component_color.md\":\"CcBqrkJz\",\"zh-cn_component_select-v2.md\":\"mxiigrGl\",\"es-es_component_tabs.md\":\"DjFLQGhM\",\"es-es_component_divider.md\":\"DBRsBvjp\",\"en-us_component_avatar.md\":\"DWS7Fd0C\",\"en-us_component_container.md\":\"vY80ziL-\",\"zh-cn_component_switch.md\":\"DO5I-QSX\",\"zh-cn_component_divider.md\":\"DxIERZP0\",\"zh-cn_component_tabs.md\":\"C3OHQeUx\",\"en-us_component_tabs.md\":\"DucTd7_U\",\"en-us_component_watermark.md\":\"D3yeY-Um\",\"en-us_component_affix.md\":\"BJ_SX5O5\",\"en-us_component_anchor.md\":\"D4cvSyYW\",\"zh-cn_component_menu.md\":\"BVS78FqT\",\"en-us_component_switch.md\":\"mWdkrSeS\",\"en-us_guide_theming.md\":\"BoCOczvw\",\"en-us_component_layout.md\":\"CgNEO3Qv\",\"zh-cn_component_datetime-picker.md\":\"ByXnpOl-\",\"en-us_guide_translation.md\":\"BJgVWgZf\",\"en-us_component_image.md\":\"CXirJdHO\",\"en-us_component_form.md\":\"QmiWXOM2\",\"zh-cn_component_time-select.md\":\"Dr1RNtjr\",\"zh-cn_component_typography.md\":\"DiKrJ4Pu\",\"en-us_component_loading.md\":\"Ce4OOZv8\",\"zh-cn_component_icon.md\":\"CJfKbnRg\",\"zh-cn_component_link.md\":\"BhDy2uJO\",\"en-us_component_space.md\":\"srTjsB70\",\"en-us_component_rate.md\":\"BE1_c1fk\",\"zh-cn_component_popconfirm.md\":\"BpzhHC0z\",\"zh-cn_component_input-number.md\":\"CtEM4rlG\",\"zh-cn_component_image.md\":\"DBp2OC3Z\",\"zh-cn_guide_ssr.md\":\"DOGF6s4I\",\"en-us_component_scrollbar.md\":\"KgBsePz3\",\"es-es_component_alert.md\":\"DCv5h-Vk\",\"zh-cn_component_mention.md\":\"p2_vY0SA\",\"zh-cn_component_input.md\":\"KmdGFRAr\",\"zh-cn_component_date-picker.md\":\"-Ke9xuzD\",\"zh-cn_component_descriptions.md\":\"Bm7wmY8J\",\"es-es_component_autocomplete.md\":\"B18rJxag\",\"es-es_component_breadcrumb.md\":\"B8_ACYR2\",\"en-us_guide_commit-examples.md\":\"B8VJ1Bww\",\"zh-cn_guide_quickstart.md\":\"7BP2pAZy\",\"zh-cn_component_select.md\":\"Z7ZdQ9Ak\",\"zh-cn_component_pagination.md\":\"DWHIGFLf\",\"zh-cn_component_tooltip.md\":\"KuM-ipUD\",\"zh-cn_component_tag.md\":\"LGSsvblP\",\"en-us_component_steps.md\":\"BT3sQQJg\",\"zh-cn_component_rate.md\":\"BFpX5jME\",\"zh-cn_component_form.md\":\"Bwbq-ols\",\"zh-cn_component_dropdown.md\":\"CgyKPsTQ\",\"zh-cn_component_message-box.md\":\"BkEjpxmO\",\"zh-cn_component_time-picker.md\":\"DRYhd-e3\",\"es-es_component_table.md\":\"U5fEfPwN\",\"es-es_component_backtop.md\":\"DND1PNSx\",\"en-us_component_table.md\":\"Dj-cwAX7\",\"zh-cn_guide_installation.md\":\"28Qiswm1\",\"zh-cn_component_table.md\":\"LJCOmrCl\",\"es-es_component_table-v2.md\":\"C_X70wMr\",\"en-us_component_table-v2.md\":\"BeFochcV\",\"zh-cn_component_table-v2.md\":\"w_GGZaGb\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Element Plus\",\"description\":\"A Vue 3 based component library for designers and developers\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"repo\":\"element-plus/element-plus\",\"docsBranch\":\"dev\",\"docsDir\":\"docs\",\"editLinks\":true,\"editLinkText\":\"Edit this page on GitHub\",\"logo\":\"/images/element-plus-logo.svg\",\"logoSmall\":\"/images/element-plus-logo-small.svg\",\"sidebars\":{\"/guide/\":{\"en-US\":[{\"text\":\"Basics\",\"children\":[{\"text\":\"Design\",\"link\":\"/en-US/guide/design\"},{\"text\":\"Navigation\",\"link\":\"/en-US/guide/nav\"},{\"text\":\"Installation\",\"link\":\"/en-US/guide/installation\"},{\"text\":\"Quick Start\",\"link\":\"/en-US/guide/quickstart\"}]},{\"text\":\"Advanced\",\"children\":[{\"text\":\"i18n\",\"link\":\"/en-US/guide/i18n\"},{\"text\":\"Migration from ElementUI\",\"link\":\"/en-US/guide/migration\"},{\"text\":\"Theming\",\"link\":\"/en-US/guide/theming\"},{\"text\":\"Dark Mode\",\"link\":\"/en-US/guide/dark-mode\",\"promotion\":\"2.2.0\"},{\"text\":\"Custom Namespace\",\"link\":\"/en-US/guide/namespace\",\"promotion\":\"2.2.0\"},{\"text\":\"SSR\",\"link\":\"/en-US/guide/ssr\"},{\"text\":\"Built-in Transitions\",\"link\":\"/en-US/guide/transitions\"},{\"text\":\"Changelog\",\"link\":\"/en-US/guide/changelog\"}]},{\"text\":\"Development\",\"children\":[{\"text\":\"Development Guide\",\"link\":\"/en-US/guide/dev-guide\"},{\"text\":\"Development FAQ\",\"link\":\"/en-US/guide/dev-faq\"},{\"text\":\"Commit Examples\",\"link\":\"/en-US/guide/commit-examples\"},{\"text\":\"Translation\",\"link\":\"/en-US/guide/translation\"}]}],\"es-ES\":[{\"text\":\"Basics\",\"children\":[{\"text\":\"Design\",\"link\":\"/es-ES/guide/design\"},{\"text\":\"Navigation\",\"link\":\"/es-ES/guide/nav\"},{\"text\":\"Installation\",\"link\":\"/es-ES/guide/installation\"},{\"text\":\"Quick Start\",\"link\":\"/es-ES/guide/quickstart\"}]},{\"text\":\"Advanced\",\"children\":[{\"text\":\"i18n\",\"link\":\"/es-ES/guide/i18n\"},{\"text\":\"Migración desde ElementUI\",\"link\":\"/es-ES/guide/migration\"},{\"text\":\"Theming\",\"link\":\"/es-ES/guide/theming\"},{\"text\":\"Dark Mode\",\"link\":\"/es-ES/guide/dark-mode\",\"promotion\":\"2.2.0\"},{\"text\":\"Custom Namespace\",\"link\":\"/es-ES/guide/namespace\",\"promotion\":\"2.2.0\"},{\"text\":\"SSR\",\"link\":\"/es-ES/guide/ssr\"},{\"text\":\"Built-in Transitions\",\"link\":\"/es-ES/guide/transitions\"},{\"text\":\"Changelog\",\"link\":\"/es-ES/guide/changelog\"}]},{\"text\":\"Development\",\"children\":[{\"text\":\"Development Guide\",\"link\":\"/es-ES/guide/dev-guide\"},{\"text\":\"Development FAQ\",\"link\":\"/es-ES/guide/dev-faq\"},{\"text\":\"Commit Examples\",\"link\":\"/es-ES/guide/commit-examples\"},{\"text\":\"Translation\",\"link\":\"/es-ES/guide/translation\"}]}],\"zh-CN\":[{\"text\":\"基础\",\"children\":[{\"text\":\"设计\",\"link\":\"/zh-CN/guide/design\"},{\"text\":\"导航\",\"link\":\"/zh-CN/guide/nav\"},{\"text\":\"安装\",\"link\":\"/zh-CN/guide/installation\"},{\"text\":\"快速开始\",\"link\":\"/zh-CN/guide/quickstart\"}]},{\"text\":\"进阶\",\"children\":[{\"text\":\"国际化\",\"link\":\"/zh-CN/guide/i18n\"},{\"text\":\"从 Element UI 升级\",\"link\":\"/zh-CN/guide/migration\"},{\"text\":\"主题\",\"link\":\"/zh-CN/guide/theming\"},{\"text\":\"暗黑模式\",\"link\":\"/zh-CN/guide/dark-mode\",\"promotion\":\"2.2.0\"},{\"text\":\"自定义命名空间\",\"link\":\"/zh-CN/guide/namespace\",\"promotion\":\"2.2.0\"},{\"text\":\"SSR\",\"link\":\"/zh-CN/guide/ssr\"},{\"text\":\"内置过渡动画\",\"link\":\"/zh-CN/guide/transitions\"},{\"text\":\"更新日志\",\"link\":\"/zh-CN/guide/changelog\"}]},{\"text\":\"开发\",\"children\":[{\"text\":\"开发指南\",\"link\":\"/zh-CN/guide/dev-guide\"},{\"text\":\"开发常见问题\",\"link\":\"/zh-CN/guide/dev-faq\"},{\"text\":\"提交示例\",\"link\":\"/zh-CN/guide/commit-examples\"},{\"text\":\"翻译\",\"link\":\"/zh-CN/guide/translation\"}]}]},\"/component/\":{\"en-US\":[{\"text\":\"Overview\",\"children\":[{\"link\":\"/en-US/component/overview\",\"text\":\"Overview\"}]},{\"text\":\"Basic\",\"children\":[{\"link\":\"/en-US/component/button\",\"text\":\"Button\"},{\"link\":\"/en-US/component/border\",\"text\":\"Border\"},{\"link\":\"/en-US/component/color\",\"text\":\"Color\"},{\"link\":\"/en-US/component/container\",\"text\":\"Layout Container\"},{\"link\":\"/en-US/component/icon\",\"text\":\"Icon\"},{\"link\":\"/en-US/component/layout\",\"text\":\"Layout\"},{\"link\":\"/en-US/component/link\",\"text\":\"Link\"},{\"link\":\"/en-US/component/text\",\"text\":\"Text\",\"promotion\":\"2.3.0\"},{\"link\":\"/en-US/component/scrollbar\",\"text\":\"Scrollbar\"},{\"link\":\"/en-US/component/space\",\"text\":\"Space\"},{\"link\":\"/en-US/component/typography\",\"text\":\"Typography\"}]},{\"text\":\"Configuration\",\"children\":[{\"link\":\"/en-US/component/config-provider\",\"text\":\"Config Provider\"}]},{\"text\":\"Form\",\"children\":[{\"link\":\"/en-US/component/autocomplete\",\"text\":\"Autocomplete\"},{\"link\":\"/en-US/component/cascader\",\"text\":\"Cascader\"},{\"link\":\"/en-US/component/checkbox\",\"text\":\"Checkbox\"},{\"link\":\"/en-US/component/color-picker\",\"text\":\"Color Picker\"},{\"link\":\"/en-US/component/date-picker\",\"text\":\"Date Picker\"},{\"link\":\"/en-US/component/datetime-picker\",\"text\":\"DateTime Picker\"},{\"link\":\"/en-US/component/form\",\"text\":\"Form\"},{\"link\":\"/en-US/component/input\",\"text\":\"Input\"},{\"link\":\"/en-US/component/input-number\",\"text\":\"Input Number\"},{\"link\":\"/en-US/component/mention\",\"text\":\"Mention\",\"promotion\":\"2.8.0\"},{\"link\":\"/en-US/component/radio\",\"text\":\"Radio\"},{\"link\":\"/en-US/component/rate\",\"text\":\"Rate\"},{\"link\":\"/en-US/component/select\",\"text\":\"Select\"},{\"link\":\"/en-US/component/select-v2\",\"text\":\"Virtualized Select\"},{\"link\":\"/en-US/component/slider\",\"text\":\"Slider\"},{\"link\":\"/en-US/component/switch\",\"text\":\"Switch\"},{\"link\":\"/en-US/component/time-picker\",\"text\":\"Time Picker\"},{\"link\":\"/en-US/component/time-select\",\"text\":\"Time Select\"},{\"link\":\"/en-US/component/transfer\",\"text\":\"Transfer\"},{\"link\":\"/en-US/component/tree-select\",\"text\":\"TreeSelect\",\"promotion\":\"2.1.8\"},{\"link\":\"/en-US/component/upload\",\"text\":\"Upload\"}]},{\"text\":\"Data\",\"children\":[{\"link\":\"/en-US/component/avatar\",\"text\":\"Avatar\"},{\"link\":\"/en-US/component/badge\",\"text\":\"Badge\"},{\"link\":\"/en-US/component/calendar\",\"text\":\"Calendar\"},{\"link\":\"/en-US/component/card\",\"text\":\"Card\"},{\"link\":\"/en-US/component/carousel\",\"text\":\"Carousel\"},{\"link\":\"/en-US/component/collapse\",\"text\":\"Collapse\"},{\"link\":\"/en-US/component/descriptions\",\"text\":\"Descriptions\"},{\"link\":\"/en-US/component/empty\",\"text\":\"Empty\"},{\"link\":\"/en-US/component/image\",\"text\":\"Image\"},{\"link\":\"/en-US/component/infinite-scroll\",\"text\":\"Infinite Scroll\"},{\"link\":\"/en-US/component/pagination\",\"text\":\"Pagination\"},{\"link\":\"/en-US/component/progress\",\"text\":\"Progress\"},{\"link\":\"/en-US/component/result\",\"text\":\"Result\"},{\"link\":\"/en-US/component/skeleton\",\"text\":\"Skeleton\"},{\"link\":\"/en-US/component/table\",\"text\":\"Table\"},{\"link\":\"/en-US/component/table-v2\",\"text\":\"Virtualized Table\",\"promotion\":\"2.2.0\"},{\"link\":\"/en-US/component/tag\",\"text\":\"Tag\"},{\"link\":\"/en-US/component/timeline\",\"text\":\"Timeline\"},{\"link\":\"/en-US/component/tour\",\"text\":\"Tour\",\"promotion\":\"2.5.0\"},{\"link\":\"/en-US/component/tree\",\"text\":\"Tree\"},{\"link\":\"/en-US/component/tree-v2\",\"text\":\"Virtualized Tree\"},{\"link\":\"/en-US/component/statistic\",\"text\":\"Statistic\",\"promotion\":\"2.2.30\"},{\"link\":\"/en-US/component/segmented\",\"text\":\"Segmented\",\"promotion\":\"2.7.0\"}]},{\"text\":\"Navigation\",\"children\":[{\"link\":\"/en-US/component/affix\",\"text\":\"Affix\"},{\"link\":\"/en-US/component/anchor\",\"text\":\"Anchor\",\"promotion\":\"2.6.0\"},{\"link\":\"/en-US/component/backtop\",\"text\":\"Backtop\"},{\"link\":\"/en-US/component/breadcrumb\",\"text\":\"Breadcrumb\"},{\"link\":\"/en-US/component/dropdown\",\"text\":\"Dropdown\"},{\"link\":\"/en-US/component/menu\",\"text\":\"Menu\"},{\"link\":\"/en-US/component/page-header\",\"text\":\"Page Header\"},{\"link\":\"/en-US/component/steps\",\"text\":\"Steps\"},{\"link\":\"/en-US/component/tabs\",\"text\":\"Tabs\"}]},{\"text\":\"Feedback\",\"children\":[{\"link\":\"/en-US/component/alert\",\"text\":\"Alert\"},{\"link\":\"/en-US/component/dialog\",\"text\":\"Dialog\"},{\"link\":\"/en-US/component/drawer\",\"text\":\"Drawer\"},{\"link\":\"/en-US/component/loading\",\"text\":\"Loading\"},{\"link\":\"/en-US/component/message\",\"text\":\"Message\"},{\"link\":\"/en-US/component/message-box\",\"text\":\"Message Box\"},{\"link\":\"/en-US/component/notification\",\"text\":\"Notification\"},{\"link\":\"/en-US/component/popconfirm\",\"text\":\"Popconfirm\"},{\"link\":\"/en-US/component/popover\",\"text\":\"Popover\"},{\"link\":\"/en-US/component/tooltip\",\"text\":\"Tooltip\"}]},{\"text\":\"Others\",\"children\":[{\"link\":\"/en-US/component/divider\",\"text\":\"Divider\"},{\"link\":\"/en-US/component/watermark\",\"text\":\"Watermark\",\"promotion\":\"2.4.0\"}]}],\"es-ES\":[{\"text\":\"Overview\",\"children\":[{\"link\":\"/es-ES/component/overview\",\"text\":\"Overview\"}]},{\"text\":\"Basic\",\"children\":[{\"link\":\"/es-ES/component/button\",\"text\":\"Button\"},{\"link\":\"/es-ES/component/border\",\"text\":\"Border\"},{\"link\":\"/es-ES/component/color\",\"text\":\"Color\"},{\"link\":\"/es-ES/component/container\",\"text\":\"Layout Container\"},{\"link\":\"/es-ES/component/icon\",\"text\":\"Icon\"},{\"link\":\"/es-ES/component/layout\",\"text\":\"Layout\"},{\"link\":\"/es-ES/component/link\",\"text\":\"Link\"},{\"link\":\"/es-ES/component/text\",\"text\":\"Text\",\"promotion\":\"2.3.0\"},{\"link\":\"/es-ES/component/scrollbar\",\"text\":\"Scrollbar\"},{\"link\":\"/es-ES/component/space\",\"text\":\"Space\"},{\"link\":\"/es-ES/component/typography\",\"text\":\"Typography\"}]},{\"text\":\"Configuration\",\"children\":[{\"link\":\"/es-ES/component/config-provider\",\"text\":\"Config Provider\"}]},{\"text\":\"Form\",\"children\":[{\"link\":\"/es-ES/component/autocomplete\",\"text\":\"Autocomplete\"},{\"link\":\"/es-ES/component/cascader\",\"text\":\"Cascader\"},{\"link\":\"/es-ES/component/checkbox\",\"text\":\"Checkbox\"},{\"link\":\"/es-ES/component/color-picker\",\"text\":\"Color Picker\"},{\"link\":\"/es-ES/component/date-picker\",\"text\":\"Date Picker\"},{\"link\":\"/es-ES/component/datetime-picker\",\"text\":\"DateTime Picker\"},{\"link\":\"/es-ES/component/form\",\"text\":\"Form\"},{\"link\":\"/es-ES/component/input\",\"text\":\"Input\"},{\"link\":\"/es-ES/component/input-number\",\"text\":\"Input Number\"},{\"link\":\"/es-ES/component/mention\",\"text\":\"Mention\",\"promotion\":\"2.8.0\"},{\"link\":\"/es-ES/component/radio\",\"text\":\"Radio\"},{\"link\":\"/es-ES/component/rate\",\"text\":\"Rate\"},{\"link\":\"/es-ES/component/select\",\"text\":\"Select\"},{\"link\":\"/es-ES/component/select-v2\",\"text\":\"Virtualized Select\"},{\"link\":\"/es-ES/component/slider\",\"text\":\"Slider\"},{\"link\":\"/es-ES/component/switch\",\"text\":\"Switch\"},{\"link\":\"/es-ES/component/time-picker\",\"text\":\"Time Picker\"},{\"link\":\"/es-ES/component/time-select\",\"text\":\"Time Select\"},{\"link\":\"/es-ES/component/transfer\",\"text\":\"Transfer\"},{\"link\":\"/es-ES/component/tree-select\",\"text\":\"TreeSelect\",\"promotion\":\"2.1.8\"},{\"link\":\"/es-ES/component/upload\",\"text\":\"Upload\"}]},{\"text\":\"Data\",\"children\":[{\"link\":\"/es-ES/component/avatar\",\"text\":\"Avatar\"},{\"link\":\"/es-ES/component/badge\",\"text\":\"Badge\"},{\"link\":\"/es-ES/component/calendar\",\"text\":\"Calendar\"},{\"link\":\"/es-ES/component/card\",\"text\":\"Card\"},{\"link\":\"/es-ES/component/carousel\",\"text\":\"Carousel\"},{\"link\":\"/es-ES/component/collapse\",\"text\":\"Collapse\"},{\"link\":\"/es-ES/component/descriptions\",\"text\":\"Descriptions\"},{\"link\":\"/es-ES/component/empty\",\"text\":\"Empty\"},{\"link\":\"/es-ES/component/image\",\"text\":\"Image\"},{\"link\":\"/es-ES/component/infinite-scroll\",\"text\":\"Infinite Scroll\"},{\"link\":\"/es-ES/component/pagination\",\"text\":\"Pagination\"},{\"link\":\"/es-ES/component/progress\",\"text\":\"Progress\"},{\"link\":\"/es-ES/component/result\",\"text\":\"Result\"},{\"link\":\"/es-ES/component/skeleton\",\"text\":\"Skeleton\"},{\"link\":\"/es-ES/component/table\",\"text\":\"Table\"},{\"link\":\"/es-ES/component/table-v2\",\"text\":\"Virtualized Table\",\"promotion\":\"2.2.0\"},{\"link\":\"/es-ES/component/tag\",\"text\":\"Tag\"},{\"link\":\"/es-ES/component/timeline\",\"text\":\"Timeline\"},{\"link\":\"/es-ES/component/tour\",\"text\":\"Tour\",\"promotion\":\"2.5.0\"},{\"link\":\"/es-ES/component/tree\",\"text\":\"Tree\"},{\"link\":\"/es-ES/component/tree-v2\",\"text\":\"Virtualized Tree\"},{\"link\":\"/es-ES/component/statistic\",\"text\":\"Statistic\",\"promotion\":\"2.2.30\"},{\"link\":\"/es-ES/component/segmented\",\"text\":\"Segmented\",\"promotion\":\"2.7.0\"}]},{\"text\":\"Navigation\",\"children\":[{\"link\":\"/es-ES/component/affix\",\"text\":\"Affix\"},{\"link\":\"/es-ES/component/anchor\",\"text\":\"Anchor\",\"promotion\":\"2.6.0\"},{\"link\":\"/es-ES/component/backtop\",\"text\":\"Backtop\"},{\"link\":\"/es-ES/component/breadcrumb\",\"text\":\"Breadcrumb\"},{\"link\":\"/es-ES/component/dropdown\",\"text\":\"Dropdown\"},{\"link\":\"/es-ES/component/menu\",\"text\":\"Menu\"},{\"link\":\"/es-ES/component/page-header\",\"text\":\"Page Header\"},{\"link\":\"/es-ES/component/steps\",\"text\":\"Steps\"},{\"link\":\"/es-ES/component/tabs\",\"text\":\"Tabs\"}]},{\"text\":\"Feedback\",\"children\":[{\"link\":\"/es-ES/component/alert\",\"text\":\"Alert\"},{\"link\":\"/es-ES/component/dialog\",\"text\":\"Dialog\"},{\"link\":\"/es-ES/component/drawer\",\"text\":\"Drawer\"},{\"link\":\"/es-ES/component/loading\",\"text\":\"Loading\"},{\"link\":\"/es-ES/component/message\",\"text\":\"Message\"},{\"link\":\"/es-ES/component/message-box\",\"text\":\"Message Box\"},{\"link\":\"/es-ES/component/notification\",\"text\":\"Notification\"},{\"link\":\"/es-ES/component/popconfirm\",\"text\":\"Popconfirm\"},{\"link\":\"/es-ES/component/popover\",\"text\":\"Popover\"},{\"link\":\"/es-ES/component/tooltip\",\"text\":\"Tooltip\"}]},{\"text\":\"Others\",\"children\":[{\"link\":\"/es-ES/component/divider\",\"text\":\"Divider\"},{\"link\":\"/es-ES/component/watermark\",\"text\":\"Watermark\",\"promotion\":\"2.4.0\"}]}],\"zh-CN\":[{\"text\":\"Overview 组件总览\",\"children\":[{\"link\":\"/zh-CN/component/overview\",\"text\":\"Overview 组件总览\"}]},{\"text\":\"Basic 基础组件\",\"children\":[{\"link\":\"/zh-CN/component/button\",\"text\":\"Button 按钮\"},{\"link\":\"/zh-CN/component/border\",\"text\":\"Border 边框\"},{\"link\":\"/zh-CN/component/color\",\"text\":\"Color 色彩\"},{\"link\":\"/zh-CN/component/container\",\"text\":\"Container 布局容器\"},{\"link\":\"/zh-CN/component/icon\",\"text\":\"Icon 图标\"},{\"link\":\"/zh-CN/component/layout\",\"text\":\"Layout 布局\"},{\"link\":\"/zh-CN/component/link\",\"text\":\"Link 链接\"},{\"link\":\"/zh-CN/component/text\",\"text\":\"Text 文本\",\"promotion\":\"2.3.0\"},{\"link\":\"/zh-CN/component/scrollbar\",\"text\":\"Scrollbar 滚动条\"},{\"link\":\"/zh-CN/component/space\",\"text\":\"Space 间距\"},{\"link\":\"/zh-CN/component/typography\",\"text\":\"Typography 排版\"}]},{\"text\":\"配置组件\",\"children\":[{\"link\":\"/zh-CN/component/config-provider\",\"text\":\"Config Provider 全局配置\"}]},{\"text\":\"Form 表单组件\",\"children\":[{\"link\":\"/zh-CN/component/autocomplete\",\"text\":\"Autocomplete 自动补全输入框\"},{\"link\":\"/zh-CN/component/cascader\",\"text\":\"Cascader 级联选择器\"},{\"link\":\"/zh-CN/component/checkbox\",\"text\":\"Checkbox 多选框\"},{\"link\":\"/zh-CN/component/color-picker\",\"text\":\"Color Picker 取色器\"},{\"link\":\"/zh-CN/component/date-picker\",\"text\":\"Date Picker 日期选择器\"},{\"link\":\"/zh-CN/component/datetime-picker\",\"text\":\"DateTime Picker 日期时间选择器\"},{\"link\":\"/zh-CN/component/form\",\"text\":\"Form 表单\"},{\"link\":\"/zh-CN/component/input\",\"text\":\"Input 输入框\"},{\"link\":\"/zh-CN/component/input-number\",\"text\":\"Input Number 数字输入框\"},{\"link\":\"/zh-CN/component/mention\",\"text\":\"Mention 提及\",\"promotion\":\"2.8.0\"},{\"link\":\"/zh-CN/component/radio\",\"text\":\"Radio 单选框\"},{\"link\":\"/zh-CN/component/rate\",\"text\":\"Rate 评分\"},{\"link\":\"/zh-CN/component/select\",\"text\":\"Select 选择器\"},{\"link\":\"/zh-CN/component/select-v2\",\"text\":\"Virtualized Select 虚拟化选择器\"},{\"link\":\"/zh-CN/component/slider\",\"text\":\"Slider 滑块\"},{\"link\":\"/zh-CN/component/switch\",\"text\":\"Switch 开关\"},{\"link\":\"/zh-CN/component/time-picker\",\"text\":\"Time Picker 时间选择器\"},{\"link\":\"/zh-CN/component/time-select\",\"text\":\"Time Select 时间选择\"},{\"link\":\"/zh-CN/component/transfer\",\"text\":\"Transfer 穿梭框\"},{\"link\":\"/zh-CN/component/tree-select\",\"text\":\"TreeSelect 树形选择\",\"promotion\":\"2.1.8\"},{\"link\":\"/zh-CN/component/upload\",\"text\":\"Upload 上传\"}]},{\"text\":\"Data 数据展示\",\"children\":[{\"link\":\"/zh-CN/component/avatar\",\"text\":\"Avatar 头像\"},{\"link\":\"/zh-CN/component/badge\",\"text\":\"Badge 徽章\"},{\"link\":\"/zh-CN/component/calendar\",\"text\":\"Calendar 日历\"},{\"link\":\"/zh-CN/component/card\",\"text\":\"Card 卡片\"},{\"link\":\"/zh-CN/component/carousel\",\"text\":\"Carousel 走马灯\"},{\"link\":\"/zh-CN/component/collapse\",\"text\":\"Collapse 折叠面板\"},{\"link\":\"/zh-CN/component/descriptions\",\"text\":\"Descriptions 描述列表\"},{\"link\":\"/zh-CN/component/empty\",\"text\":\"Empty 空状态\"},{\"link\":\"/zh-CN/component/image\",\"text\":\"Image 图片\"},{\"link\":\"/zh-CN/component/infinite-scroll\",\"text\":\"Infinite Scroll 无限滚动\"},{\"link\":\"/zh-CN/component/pagination\",\"text\":\"Pagination 分页\"},{\"link\":\"/zh-CN/component/progress\",\"text\":\"Progress 进度条\"},{\"link\":\"/zh-CN/component/result\",\"text\":\"Result 结果\"},{\"link\":\"/zh-CN/component/skeleton\",\"text\":\"Skeleton 骨架屏\"},{\"link\":\"/zh-CN/component/table\",\"text\":\"Table 表格\"},{\"link\":\"/zh-CN/component/table-v2\",\"text\":\"Virtualized Table 虚拟化表格\",\"promotion\":\"2.2.0\"},{\"link\":\"/zh-CN/component/tag\",\"text\":\"Tag 标签\"},{\"link\":\"/zh-CN/component/timeline\",\"text\":\"Timeline 时间线\"},{\"link\":\"/zh-CN/component/tour\",\"text\":\"Tour 漫游式引导\",\"promotion\":\"2.5.0\"},{\"link\":\"/zh-CN/component/tree\",\"text\":\"Tree 树形控件\"},{\"link\":\"/zh-CN/component/tree-v2\",\"text\":\"Virtualized Tree 虚拟化树形控件\"},{\"link\":\"/zh-CN/component/statistic\",\"text\":\"Statistic 统计组件\",\"promotion\":\"2.2.30\"},{\"link\":\"/zh-CN/component/segmented\",\"text\":\"Segmented 分段控制器\",\"promotion\":\"2.7.0\"}]},{\"text\":\"Navigation 导航\",\"children\":[{\"link\":\"/zh-CN/component/affix\",\"text\":\"Affix 固钉\"},{\"link\":\"/zh-CN/component/anchor\",\"text\":\"Anchor 锚点\",\"promotion\":\"2.6.0\"},{\"link\":\"/zh-CN/component/backtop\",\"text\":\"Backtop 回到顶部\"},{\"link\":\"/zh-CN/component/breadcrumb\",\"text\":\"Breadcrumb 面包屑\"},{\"link\":\"/zh-CN/component/dropdown\",\"text\":\"Dropdown 下拉菜单\"},{\"link\":\"/zh-CN/component/menu\",\"text\":\"Menu 菜单\"},{\"link\":\"/zh-CN/component/page-header\",\"text\":\"Page Header 页头\"},{\"link\":\"/zh-CN/component/steps\",\"text\":\"Steps 步骤条\"},{\"link\":\"/zh-CN/component/tabs\",\"text\":\"Tabs 标签页\"}]},{\"text\":\"Feedback 反馈组件\",\"children\":[{\"link\":\"/zh-CN/component/alert\",\"text\":\"Alert 提示\"},{\"link\":\"/zh-CN/component/dialog\",\"text\":\"Dialog 对话框\"},{\"link\":\"/zh-CN/component/drawer\",\"text\":\"Drawer 抽屉\"},{\"link\":\"/zh-CN/component/loading\",\"text\":\"Loading 加载\"},{\"link\":\"/zh-CN/component/message\",\"text\":\"Message 消息提示\"},{\"link\":\"/zh-CN/component/message-box\",\"text\":\"Message Box 消息弹出框\"},{\"link\":\"/zh-CN/component/notification\",\"text\":\"Notification 通知\"},{\"link\":\"/zh-CN/component/popconfirm\",\"text\":\"Popconfirm 气泡确认框\"},{\"link\":\"/zh-CN/component/popover\",\"text\":\"Popover 弹出框\"},{\"link\":\"/zh-CN/component/tooltip\",\"text\":\"Tooltip 文字提示\"}]},{\"text\":\"Others 其他\",\"children\":[{\"link\":\"/zh-CN/component/divider\",\"text\":\"Divider 分割线\"},{\"link\":\"/zh-CN/component/watermark\",\"text\":\"Watermark 水印 \",\"promotion\":\"2.4.0\"}]}]}},\"nav\":{\"en-US\":[{\"text\":\"Guide\",\"link\":\"/en-US/guide/design\",\"activeMatch\":\"/guide/\"},{\"text\":\"Component\",\"link\":\"/en-US/component/overview\",\"activeMatch\":\"/component/\"},{\"text\":\"Resource\",\"link\":\"/en-US/resource/index\",\"activeMatch\":\"/resource/\"}],\"es-ES\":[{\"text\":\"Guías\",\"link\":\"/es-ES/guide/design\",\"activeMatch\":\"/guide/\"},{\"text\":\"Componentes\",\"link\":\"/es-ES/component/overview\",\"activeMatch\":\"/component/\"},{\"text\":\"Recursos\",\"link\":\"/es-ES/resource/index\",\"activeMatch\":\"/resource/\"}],\"zh-CN\":[{\"text\":\"指南\",\"link\":\"/zh-CN/guide/design\",\"activeMatch\":\"/guide/\"},{\"text\":\"组件\",\"link\":\"/zh-CN/component/overview\",\"activeMatch\":\"/component/\"},{\"text\":\"资源\",\"link\":\"/zh-CN/resource/index\",\"activeMatch\":\"/resource/\"}]},\"agolia\":{\"apiKey\":\"99caf32e743ba77d78b095b763b8e380\",\"appId\":\"ZM3TI8AKL4\"},\"features\":{},\"langs\":[\"en-US\",\"es-ES\",\"zh-CN\"]},\"locales\":{\"/en-US\":{\"label\":\"en-US\",\"lang\":\"en-US\"},\"/es-ES\":{\"label\":\"es-ES\",\"lang\":\"es-ES\"},\"/zh-CN\":{\"label\":\"zh-CN\",\"lang\":\"zh-CN\"}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>